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。至于使用哪一种方式就比较看我的了

　　

还有别的方面，如今就很少叙述了。我本身也要消化消化，，。