vue-cli3项目从构建优化到码头部署的方法

1.创建vue项目

我相信大多数人已经知道如何创建一个项目。你可以跳过这一节，看看下一节。

1.1安装@vue/cli

#全局安装vue-cli脚手架npm install -g @vue/cli，等待安装完成并开始下一步

1.2初始化项目

Vue创建vue-cli3-项目(1)选择预设

您可以选择默认预设，包括babel和eslint

我们选择更多功能手动选择功能

输入，然后选择插件

(2)插件选择

在这里选择(巴贝尔，路由器，Vuex，Css预处理器，Linter/Formatter格式检查，单元测试框架)

(3)路由方式的选择

在历史模式下使用路由(是)

(4)选择css预处理器(萨斯/SCSS)

(5)选择eslint配置

在这里选择ESLint标准配置，个人喜欢这个代码规范

(6)选择何时进行积分验证

选择(保存时线头)进行检查。

如果您使用的是vscode编辑器，您可以配置eslint插件来自动格式化代码

7.选择测试框架(摩卡柴)

8.选择这些配置文件的写入位置(在专用配置文件中)

9.是否要保存此预设配置？(y)

如果选择“是”，则可以直接使用此预设文件，而无需在下次创建vue项目时对其进行配置。

等待依赖性完成

2.全局组件的自动注册

在组件目录下创建一个全局目录，其中放置一些需要全局注册的组件。

index.js的功能是导入main.vue和导出组件对象

在组件中创建一个index.js来扫描全局对象并自动注册它们。

//components/index.js从' vue'/导入vue自动加载文件const components context=require . context('。/global '，true，/\。js$/)componentsContext.keys()。forEach(component={ const component config=components context(component)/* * *与导入导出兼容并需要module.export规范*/const ctrl=component config . default | | component config vue.component(ctrl。名称，ctrl)})。最后，将这个index.js导入main.js

3.路线自动介绍

Vue项目中使用了路由。我相信想熟悉它的人已经熟悉如何使用它了。如果要添加新页面，需要在路由配置中配置该页面的信息。

如果页面越来越多，如何让我们的道路变得更简单？

3.1分割布线

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

导出每个子模块中的路由配置阵列

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

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

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

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

通过以上自动扫描全局组件注册，我们还可以自动扫描子模块路由并导入它们

4.通过节点生成组件

作为一个前端开发者，如果用不到像node这样好的东西，岂不是浪费？

虽然我们已经通过以上实现了组件的自动注册，但是每次创建新的组件时，都必须先创建一个目录，然后添加一个. vue文件，然后编写模板、脚本和样式，再创建一个新的index.js

，导出vue组件