vue 項目總結，以及對將來的理解，對性能方面的認知

以前本身寫了一個vue項目，由於沒有經驗，因此不少方面的提高作的很差，好比說路由、好比說ajax都沒有封裝，好比說業務邏輯和通用邏輯都混合在一塊兒，致使大片大片重複的代碼累積。忽悠忽悠沒入門的前端感受仍是很好，各類崇拜。

可是內在真的是看一眼，幾斤幾兩呼之欲出。可以獨立搭建項目好像實際上是件愈來愈簡單的事情、各類工具更加方便快捷、

後來看了一個比較成熟的團隊寫的一個vue的項目，讓我學習到了很多，有時候本身獨立作一個項目其實很累人，有可能還吃力不討好的那種，

畢竟同一個世界同一個夢想，每個公司都不同，每個項目趕着上線都差不太多。

如下是個人總結：

　　一、路由方面。

　　　　路由我是放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.全局組件統一聲明

1. 組織結構

　　

components // 組件文件夾
|__xxx.vue // 其餘組件
|__global // 全局組件文件夾
|__index.js // 自動化處理文件
|__demo.vue // 全局demo組件

　　

2. 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)
})

　　

3. 使用和說明

直接在app.js引用這個文件就行，我以前看到有些人作法是使用組件名去區分全局組件和普通組件，而後經過正則去判斷需不須要全局註冊。我是直接把全局的組件放到global文件夾下，而後組件的註冊名稱直接使用component.name。至於使用哪一種方式就比較看我的了

　　

還有別的方面，如今就很少敘述了。我本身也要消化消化，，。