路由的拆分

项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理。

require.context() 是webpack提供的语法, 相当于前端的读写文件,返回的 files是一个函数,files.keys()执行,返回获取到的文件名(是一个数组),再通过files(keys)获取到模块,取到default 属性,拿到真正的导出对象。

/router/home.router.js首页路由配置

export default [
{
path: '/',
component: () => import(/*webpackChunkName:'home'*/'@/views/Home/index.vue') // 会默认代码分割
}, {
path: '*',
component:() => import(/*webpackChunkName:'404'*/'@/views/404.vue')
}]

/router/manager.router.js管理类路由配置

export default [
{
path: '/manager',
component: () => import(/*webpackChunkName:'home'*/'@/views/Manager/index.vue') // 会默认代码分割
}]

/router/index.js路由入口文件

import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter)
// 每个模块有自己的路由配置 // 获取当前对应文件夹下的 所有以router.js 结尾的文件
// files是一个函数 , false 不去遍历子目录 | /\.router.js$/ 结尾的文件
const files = require.context('./routers',false,/\.router.js$/);
const routes = [];
files.keys().forEach(key=>{
// 获取到文件的内容 拿到默认的导出结果 放到routes里 , 如果遇到* 号 路由会将* 放到最后面
routes.push(...files(key).default)
}); const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
}) export default router

VUEX模块拆分

同样将状态管理也按照模块进行划分管理,创建一个根模块rootModule文件,统一管理,实际上跟模块中可以存放一些公共的数据,并通过require.context读取其他状态管理模块,遍历添加至根模块的module属性上,module[moduleName] = store,moduleName文件名处理路径和后缀后的字符串,默认以该字符串作为命名空间。

./modules/user.js:此处暂以空内容,作为案例分享,实际项目中会存在一些用户模块特有逻辑吗,例如存储用户数据,判断用户菜单权限等。

store/rootModule.js:根实例也暂以空内容为例,实际项目中可以编写一些公共的业务逻辑进行管理,例如用户的登录状态维护,及token检验等。

export default {
state: {},
mutations: {},
actions: {},
}

store/index.js:状态管理入口文件

import Vue from 'vue'
import Vuex from 'vuex'
import rootModule from './rootModule'
Vue.use(Vuex) // 模块划分 require.context 读取文件目录
const files = require.context('./modules', false, /\.js$/);
// 自动根据当前store中的模块名解析vuex中的状态
files.keys().forEach(key => { // [./article.js, ./user.js]
let moduleName = key.replace(/\.\//, '').replace(/\.js/, ''); // 文件名处理路径和后缀后的字符串,默认以文件名作为命名空间
let store = files(key).default; // .default 真正的导出对象
let module = rootModule.modules = (rootModule.modules || {});
module[moduleName] = store;
module[moduleName].namespaced = true; // 设置命名空间, 不加空间没有作用域
}); export default new Vuex.Store(rootModule)

Element UI库按需加载的优雅写法

Element UI算是目前比较常见的UI组件库了,有非常多的组件,但是如果全部引入的话,对项目打包也并不是很友好,因此大多推荐组件的按需加载,在使用use语法,但是写的多的确实不怎么好看。所以可以参考第二种写法,封装一个对象循环调用。代码看起来会更加优雅。

import Vue from 'vue';
import { Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem } from 'element-ui'; Vue.use(Button);
Vue.use(Header);
Vue.use(Footer);
Vue.use(Main);
Vue.use(Container);
...
...
import Vue from 'vue';
import { Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem } from 'element-ui'; const components = {Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem}; Object.values(components).forEach(component => {
Vue.use(component)
})

优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载的更多相关文章

  1. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  2. 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  3. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  4. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  5. vue项目中路由验证和相应拦截的使用

    详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...

  6. 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  7. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

  8. vue路由管理-保留滚动位置功能、按需加载模块名自定义

    路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态 ...

  9. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

随机推荐

  1. 记录第一次给开源项目提 PR

    本文是深入浅出 ahooks 源码系列文章的第八篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇文章算是该系列的一个彩蛋篇,记录一下第一次给开源项目提 PR ...

  2. 三道MySQL联合索引面试题,淘汰80%的面试者,你能答对几道

    众所周知MySQL联合索引遵循最左前缀匹配原则,在少数情况下也会不遵循(有兴趣,可以翻一下上篇文章). 创建联合索引的时候,建议优先把区分度高的字段放在第一列. 至于怎么统计区分度,可以按照下面这种方 ...

  3. 【java】学习路线4-对象、嵌套引用、匿名对象

    class Learn03_MyClass{    String name = "www.pornhub.com";//成员变量:属性    public void Hello() ...

  4. 【java】学习路线1-类型转换、隐式转换、强制转换

    /**文档注释,这里是一段文章一般放在类的外面*/public class HelloWorld{    //这个是注释的文本    public static void main(String[] ...

  5. kubeadm部署k8s v1.19.4版本集群

    1. 准备2台2c4g虚机 配置地址192.168.198.144,192.168.198.146,一台作为master,一台作为node 2. 部署环境准备,每一台虚机都需要操作 # 关闭防火墙sy ...

  6. MyBatis创建第二个项目

    MyBatis创建第二个项目 Mysql文件配置 /* Navicat Premium Data Transfer​ Source Server         : Mybatis Source Se ...

  7. 微服务系列之Api文档 swagger整合

    1.前言 微服务架构随之而来的前后端彻底分离,且服务众多,无论是前后端对接亦或是产品.运营翻看,一个现代化.规范化.可视化.可尝试的文档是多么重要,所以我们这节就说说swagger. Swagger是 ...

  8. Elastic:为Elastic Docker部署设置安全

    文章转载自:https://elasticstack.blog.csdn.net/article/details/105710973 创建docker-compose.yml 在之前的教程中,那里使用 ...

  9. kibana访问多个 Elasticsearch 节点间的负载均衡

    如果 Elasticsearch 集群有多个节点,分发 Kibana 节点之间请求的最简单的方法就是在 Kibana 机器上运行一个 Elasticsearch 协调(Coordinating onl ...

  10. acme.sh官方中文说明文档

    转载自:https://github.com/acmesh-official/acme.sh/wiki/说明 acme.sh 实现了 acme 协议, 可以从 letsencrypt 生成免费的证书. ...