vue 一个页面多个router-view如何配置子路由_vue-cli3 项目从搭建优化到docker部署

项目地址 vue-cli3-project 欢迎 star
原文地址 https://www. ccode.live/lentoo/list/ 9?from=art

1. 创建一个vue项目

相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。

1.1 安装@vue/cli

# 全局安装 vue-cli脚手架
npm install -g @vue/cli

等待安装完成后开始下一步

1.2 初始化项目

vue create vue-cli3-project

1. 选择一个预设

可以选择默认预设，默认预设包含了babel,eslint

我们选择更多功能 Manually select features

回车后来到选择插件

1. 插件选择

这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架）

1. 路由模式选择

是否使用 history模式的路由 （Yes）

1. 选择一个css预处理器 (Sass/SCSS)

1. 选择一个eslint配置

这边选择 ESLint + Standard config，个人比较喜欢这个代码规范

1. 选择什么时候进行 eslint 校验

选择（Lint on save）保存是检查

如果你正在使用的vscode编辑器的话，可以配置eslint插件进行代码自动格式化

7. 选择测试框架 （Mocha + Chai）

8. 选择将这些配置文件写入到什么地方 (In dedicated config files)

1. 是否保存这份预设配置？（y）

选是的话，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置。

等待依赖完成

2. 全局组件自动注册

在components目录下创建一个global目录，里面放置一些需要全局注册的组件。

index.js作用只要是引入main.vue，导出组件对象

在components中创建一个index.js，用来扫描全局对象并自动注册。

// components/index.js
import Vue from 'vue'

// 自动加载 global 目录下的 .js 结尾的文件
const componentsContext = require.context('./global', true, /.js$/)

componentsContext.keys().forEach(component => {
    
  const componentConfig = componentsContext(component)
  /**
  * 兼容 import export 和 require module.export 两种规范
  */
  const ctrl = componentConfig.default || componentConfig
  Vue.component(ctrl.name, ctrl)
})

最后在入口文件main.js中导入这个index.js中就可以了

3.路由自动引入

在 Vue项目中使用路由，相信想熟的人已经很熟悉怎么使用了，要新增一个页面的话，需要到路由配置中配置该页面的信息。

如果页面越来越多的话，那么如何让我们的路由更简洁呢？

3.1 拆分路由

根据不同的业务模块进行拆分路由

在每个子模块中导出一个路由配置数组

在根 index.js中导入所有子模块

3.2 自动扫描子模块路由并导入

当我们的业务越来越庞大，每次新增业务模块的时候，我们都要在路由下面新增一个子路由模块，然后在index.js中导入。

那么如何简化这种操作呢？

通过上面的自动扫描全局组件注册，我们也可以实现自动扫描子模块路由并导入

4. 通过node来生成组件

作为前端开发者，放着 node这么好用的东西如果不能运用起来，岂不是很浪费？

虽然我们通过上面已经实现了组件的自动注册，不过每次新建组件的时候，都要创建一个目录，然后新增一个.vue文件，然后写template、script、style这些东西，然后新建一个index.js、导出vue组件、虽然有插件能实现自动补全，但还是很麻烦有木有。

那么我们能不能通过node来帮助我们干这些事情呢？只要告诉node帮我生成的组件名称就行了。其它的事情让node来干

4.1 通过node来生成组件

• 安装一下chalk，这个插件能让我们的控制台输出语句有各种颜色区分

npm install chalk --save-dev

在根目录中创建一个 scripts 文件夹，

新增一个generateComponent.js文件，放置生成组件的代码、

新增一个template.js文件，放置组件模板的代码 * template.js

// template.js
module.exports = {
    
  vueTemplate: compoenntName => {
    
    return `<template>
  <div class="${
    compoenntName}">
    ${
    compoenntName}组件
  </div>
</template>
<script>
export default {
  name: '${
    compoenntName}'
}
</script>
<style lang="scss" scoped>
.${
    compoenntName} {

}
</style>
`
  },
  entryTemplate: `import Main from './main.vue'
export default Main`
}

• generateComponent