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

vue 项目总结，以及对未来的理解，对性能方面的认知

标签：嵌套   支持   说明   模块   地方   怎么   大片   没有   比较   

原文地址：https://www.cnblogs.com/qingcui277/p/10118015.html