如何构建一个大型Vue应用程序？ _经验知识

vue-cli 3.0环境开发。在安装vue之前我们需要安装node环境。这个我们只要在node官方下载node绿色免安装版。然后再配置下环境变量即可使用node和npm了。

文章插图
将node所在目录配置到电脑的环境变量中就可以使用了。这里我的目录是D:\Program Files\node-v10.8.0-win-x86 。这里我们只要打开电脑-属性-系统设定-进阶-环境变量中奖该路径添加到path中即可。快捷键“win+r ”打开运行框。输入cmd在弹出的窗口中输入node -v 检查node.js是否安装成功。
【如何构建一个大型Vue应用程序？】

文章插图
这里我们配置淘宝的镜像源。这里设置永久的输入命令：npm config set registry https://registry.npm.taobao.org/
// 临时 npm --registry https://registry.npm.taobao.org install express // 永久 npm config set registry https://registry.npm.taobao.org // 验证是否成功 npm config get registry

文章插图
现在我们可以开始来搭建vue-cli 3.0环境了。输入命令：npm install -g @vue/cli 安装vue3.0（-g：指全局安装）,快捷键“win+r ”打开运行框。输入cmd在弹出的窗口中输入vue -V（大写的V哦）来检查vue是否安装成功。
npm install -g @vue/cli

文章插图
接下来我们继续创建vue项目。vue3.0和2.0有点区别。不用在装webpack了。直接使用命令：vue create project创建项目（project为项目名）。进入项目配置。这里选择Manually select features（翻译：手动选择功能）。

文章插图
进入下一个安装配置选择。这里根据项目情况自行选择配置。按上下键切换目标选项。按空格键勾选和取消。按a全选。按i反选。选好后回车确定（以下是几个选项的相关意义）。图中是我的选择。
Babel：指转译成浏览器可识别的语言。可以让你的项目支持更新的语法。如es6\es7等 TypeScript：新增的选项卡 Progressive Web App (PWA) Support：指模拟原生app Router：路由管理 Vuex：vuex管理模式 CSS Pre-processors：css预处理语言 Linter / Formatter：代码规范 Unit Testing：组件单元测试 E2E Testing：端对端测试。模拟用户真实场景

文章插图
接下来提示我们选择是否使用历史路由：这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,我们输入Y同意即可。然后就是选择CSS预处理器语言。在弹出的选项中我选择LESS

文章插图
选择ESLint的代码规范。此处使用 Standard代码规范。这里我选择了ESLint + Standard config（正常模式）
ESLint with error prevention only: 只进行报错提醒； ESLint + Airbnb conf: 不严谨模式； ESLint + Standard config: 正常模式； ESLint + Prettier: 严格模式；