如何构建一个大型Vue应用程序？

vue-cli3.0环境开发，在安装vue之前我们需要安装node环境，这个我们只要在node官方下载node绿色免安装版，然后再配置下环境变量即可使用node和npm了。将node所在目录配置到电脑的环境变量中就可以使用了，这里我的目录是D:ProgramFiles ode-v10.8.0-win-x86，这里我们只要打开电脑-属性-系统设定-进阶-环境变量中奖该路径添加到path中即可，快捷键“win r”打开运行框，输入cmd在弹出的窗口中输入node-v检查node.js是否安装成功。这里我们配置淘宝的镜像源，这里设置永久的输入命令：npmconfigsetregistry///临时npm--registryinstallexpress//永久npmconfigsetregistry//验证是否成功npmconfiggetregistry现在我们可以开始来搭建vue-cli3.0环境了，输入命令：npminstall-g@vue/cli安装vue3.0（-g：指全局安装）,快捷键“win r”打开运行框，输入cmd在弹出的窗口中输入vue-V（大写的V哦）来检查vue是否安装成功。npminstall-g@vue/cli接下来我们继续创建vue项目，vue3.0和2.0有点区别，不用在装webpack了，直接使用命令：vuecreateproject创建项目（project为项目名），进入项目配置，这里选择Manuallyselectfeatures（翻译：手动选择功能）。进入下一个安装配置选择，这里根据项目情况自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定（以下是几个选项的相关意义），图中是我的选择。Babel：指转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6es7等TypeScript：新增的选项卡ProgressiveWebApp(PWA)Support：指模拟原生appRouter：路由管理Vuex：vuex管理模式CSSPre-processors：css预处理语言Linter/Formatter：代码规范UnitTesting：组件单元测试E2ETesting：端对端测试，模拟用户真实场景接下来提示我们选择是否使用历史路由：这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面,我们输入Y同意即可，然后就是选择CSS预处理器语言，在弹出的选项中我选择LESS选择ESLint的代码规范，此处使用Standard代码规范，这里我选择了ESLint Standardconfig（正常模式）ESLintwitherrorpreventiononly:只进行报错提醒；ESLint Airbnbconf:不严谨模式；ESLint Standardconfig:正常模式；ESLint Prettier:严格模式；接着选择代码检查方式，这里提示我们何时对进行代码检测，我选择在保存时进行检测，mit（requiresGit）【翻译：整理并固定提交时（需要git）】接着选择单元测试解决方案，这里选择我Jest接着选择Babel、PostCSS、ESLint等配置文件存放位置，第一个保存配置文件中，第二个放package.json里，这里我选择单独保存在各自的配置文件中。接着提示是否在以后的项目中使用以上配置，这里我们选择no，下次自行配置，你也可以选择yes。完成以上信息配置之后开始创建项目并开始下载依赖，我们只要耐心等待进度条完成，这样我们就把Vue项目创建好并完成了初始化。

用构建前端项目教程用vue-cli来构建项目安装pminstallvue安装vue脚手架（命令行工具）pminstall--globalvue-cli创建项目vueinitwebpackdingCheng_web2进入工程cddingCheng_web2安装依赖npminstall安装vue-routernpminstallvue-router--save安装vue-vuexnpminstallvuex--save安装element-uinpmielement-ui-save安装axiosnpminstallaxios-save安装SASS加载器pminstallsass-loadernode-sass--save-dev安装less依赖npminstalllessless-loader--save-dev启动测试npmrundev打包部署npmrunbuildnpm-save-save-dev命令区别npminstall-save命令会将模块依赖写入dependencies节点。npminstall-save-dev命令会将模块依赖写入devDependencies节点。总结devDependencies节点下的模块是我们在开发时需要用的，项目部署后是不需要的，我们可以使用-save-dev的形式安装。vue-cli目录解析：build文件夹：用于存放webpack相关配置和脚本。config文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。dist文件夹：默认npmrunbuild命令打包生成的静态资源文件，用于生产部署。node_modules：存放npm命令下载的开发环境和生产环境的依赖包。src:存放项目源码及需要引用的资源文件。src下assets：存放项目中需要用到的资源文件，css、js、images等。src