码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-12-14 10:53:25      阅读:157      评论:0      收藏:0      [点我收藏+]

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

之前自己写了一个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组件

  

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

  

  1. 使用和说明

直接在app.js引用这个文件就行,我之前看到有些人做法是使用组件名去区分全局组件和普通组件,然后通过正则去判断需不需要全局注册。我是直接把全局的组件放到global文件夹下,然后组件的注册名称直接使用component.name。至于使用哪种方式就比较看个人了

  

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

 

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!