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

Posted 2021-01-26 qingcui277

之前自己写了一个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.全局组件统一声明

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

　　

还有别的方面，现在就不多叙述了。我自己也要消化消化，，。