vue 項目總結，以及對未來的理解，對性能方面的認知
之前自己寫了一個vue項目，因為沒有經驗，所以很多方面的提升做的不好，比如說路由、比如說ajax都沒有封裝，比如說業務邏輯和通用邏輯都混合在一起，導致大片大片重復的代碼累積。忽悠忽悠沒入門的前端感覺還是很好，各種崇拜。
但是內在真的是看一眼，幾斤幾兩呼之欲出。能夠獨立搭建項目好像其實是件越來越簡單的事情、各種工具更加方便快捷、
後來看了一個比較成熟的團隊寫的一個vue的項目，讓我學習到了不少，有時候自己獨立做一個項目其實很累人，有可能還吃力不討好的那種，
畢竟同一個世界同一個夢想，每一個公司都不一樣，每一個項目趕著上線都差不太多。
以下是我的總結：
1、路由方面。
路由我是放index.js一直放下寫，其實是自己不懂得靈活變通。更好的寫法是業務和通用分開，路由分開，更加模塊化還是根據功能需要你自己根據實際需求分析export出去，然後最後都引人index.js，
以下是我隨意中看到的一些人為比較好的方法，進行組織路由
（1）分割路由
首先為了方便我們管理，我們把router目錄下的文件分割為以下結構
router // 路由文件夾
|__index.js // 路由組織器：用來初始化路由等等
|__common.js // 通用路由：聲明通用路由
|__modules // 業務邏輯模塊：所以的業務邏輯模塊
|__index.js // 自動化處理文件：自動引入路由的核心文件
|__home.js // 業務模塊home：業務模塊
|__a.js // 業務模塊a
（2）modules文件夾中處理業務模塊
modules文件夾中存放著我們所有的業務邏輯模塊，至於業務邏輯模塊怎麽分，我相信大家自然有自己的一套標準。我們通過require.context()接下來編寫自動化的核心部分index.js。
const files = require.context(‘.‘, true, /\.js$/)
console.log(files.keys()) // ["./home.js"] 返回一個數組
let configRouters = []
/**
* inject routers
*/
files.keys().forEach(key => {
if (key === ‘./index.js‘) return
configRouters = configRouters.concat(files(key).default) // 讀取出文件中的default模塊
})
export default configRouters // 拋出一個Vue-router期待的結構的數組
自動化部分寫完了，那業務組件部分怎麽寫？ 這就更簡單了
import Frame from ‘@/views/frame/Frame‘
import Home from ‘@/views/index/index‘
export default [
// 首頁
{
path: ‘/index‘,
name: ‘首頁‘,
redirect: ‘/index‘,
component: Frame,
children: [ // 嵌套路由
{
path: ‘‘,
component: Home
}
]
}
]
（3）common路由處理 我們的項目中有一大堆的公共路由需要處理比如404阿，503阿等等路由我們都在common.js中進行處理。
export default [
// 默認頁面
{
path: ‘/‘,
redirect: ‘/index‘,
hidden:true
},
// 無權限頁面
{
path: ‘/nopermission‘,
name: ‘nopermission‘,
component: () => import(‘@/views/NoPermission‘)
},
// 404
{
path: ‘*‘,
name: ‘lost‘,
component: () => import(‘@/views/404‘)
}
]
（4）路由初始化 這是我們的最後一步了，用來初始化我們的項目路由
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import RouterConfig from ‘./modules‘ // 引入業務邏輯模塊
import CommonRouters from ‘./common‘ // 引入通用模塊
Vue.use(VueRouter)
export default new VueRouter({
mode: ‘history‘,// 需要服務端支持
scrollBehavior: () => ({ y: 0 }),
routes: RouterConfig.concat(CommonRouters)
})
home.js要手動的把這個模塊import到路由文件聲明的地方去使用。但是有了上面的index.js，在使用的時候你只需要去創建一個home.js並拋出一個符合VueRouter規範的數組，剩下的就不用管了。import RouterConfig from ‘./modules‘ // 引入業務邏輯模塊 已經幫你處理完了。另外擴展的話你還可以把hooks拿出來作為一個單獨文件。
2.全局組件統一聲明
- 組織結構
components // 組件文件夾
|__xxx.vue // 其他組件
|__global // 全局組件文件夾
|__index.js // 自動化處理文件
|__demo.vue // 全局demo組件
global處理
import Vue from ‘vue‘
let contexts = require.context(‘.‘, false, /\.vue$/)
contexts.keys().forEach(component => {
let componentEntity = contexts(component).default
// 使用內置的組件名稱 進行全局組件註冊
Vue.component(componentEntity.name, componentEntity)
})
- 使用和說明
直接在app.js引用這個文件就行，我之前看到有些人做法是使用組件名去區分全局組件和普通組件，然後通過正則去判斷需不需要全局註冊。我是直接把全局的組件放到global文件夾下，然後組件的註冊名稱直接使用component.name。至於使用哪種方式就比較看個人了
還有別的方面，現在就不多敘述了。我自己也要消化消化，，。
vue 項目總結，以及對未來的理解，對性能方面的認知