前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。前面我们学习了vue的基本使用，现在我们要开始更好的使用vue了。一般来说，我们使用vue有以下几种方式：script导入资源和代码（老方式）requireJs导入资源（早期模块化方式）webpack、gulp等构建打包方式（单文件组件，目前使用最多的方式)webpack方法也是我们今天要讲的，但是webpack配置太繁琐了。我们直接上vue-cli吧。webpack构建的好处（工程）babel处理js兼容性问题。（ES6转ES5）eslint检查规范postcss来处理css兼容性问题。（自动前缀，scss等）压缩资源打包，缓存问题等。mock数据，跨域代理等。可以看到通过webpack等工具，我们可以让前端项目更加健壮，解决很多痛点。vue-cli@4.3.1vue-cli是vue的脚手架，可以快速配置开发环境和完整的系统，实现基于Vue.js的快速开发。前端有问题，更新很快，基本不兼容。本文基于vue-cli@4.3.1版本。vue-cli有哪些特性特性丰富，提供对Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和端到端测试的开箱即用支持。图形界面通过支持的图形界面创建、开发和管理您的项目。其易于扩展的插件系统允许社区构建和共享可重用的解决方案以满足共同需求。VueCLI致力于标准化Vue生态系统中的工具基础。它确保各种构建工具可以基于智能默认配置平滑连接，让您可以专注于编写应用程序，而不是花费数天时间为配置问题而苦苦挣扎。它还为每个工具提供了在不弹出的情况下调整配置的灵活性。Vue-cli初始安装：VueCLI需要Node.js8.9以上版本（推荐8.11.0+，其实我觉得10.x很优秀，12.x最好不要用）。可以使用nvm或者nvm-windows在同一台电脑上管理多个Node版本#使用npm全局安装npminstall-g@vue/cli#或者使用yarn全局安装yarnglobaladd@vue/cli#查看vue-cliversionvue-V创建项目：#使用命令提示符创建项目vuecreatelilnong-top-cli#OR创建可视化界面的项目vueui请选择预设：default(Babel,eslint)使用默认配置，包括babel,eslintmanuallyselectfeatures手动选择，自由组合（Babel,TS,PWA,Router,Vuex,csspre-processors,linter/formatter,UnitTesting,E2ETesting）被低版本的浏览器执行，比如arrowfunction()=>等。TS的意思是代码是基于TS写的，当然会编译成JS在浏览器中执行。Doyouuseclass-stylecomponentsyntax:Useclass-stylecomponentsyntax?你是否使用babel进行转义：UseBabelalongsideTypeScriptforauto-detectedpolyfills?PWA指的是资源缓存，可以像本地应用一样使用。路由器是一个路由系统。是Vue.js的官方路由管理器。它与Vue.js的核心深度集成，可以轻松构建单页应用程序。Vuex是一个数据管理系统。是专门为Vue.js应用程序开发的状态管理模式。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex也集成到Vue官方调试工具devtoolsextension中，提供零配置穿越调试、状态快照导入导出等高级调试功能。css预处理器是postcss、sass等预处理工具。选择CSS预处理类型：选择CSS预处理器linter/formatter代码语法检测/代码美化选择Linter/Formatter规范类型：选择linter/formatterconfig选择lint方法，保存时检查/提交时检查：选择额外的lint特性单元测试、E2E测试选择安装依赖时使用的包管理器使用Yarn使用Yarn作为包管理工具使用NPM使用NPM作为包管理工具快速原型制作：执行单个文件使用vueserve和vuebuild命令对单个*.vue文件进行快速原型制作，但是这需要先安装一个额外的全局扩展：npminstall-g@vue/cli-service-globalvueserve缺点是需要安装全局依赖，这使得它在不同机器上的一致性得不到保证。所以这只适用于快速原型制作。vueserveMyComponent.vuevue-clistructure-lilnong-top-cli:project项目文件--.gitignore--babel.config.js:babel配置文件--node_modules:package--package-lock.json--package.json:webpack配置文件，vue-cli也用到了webpack，所以主要看这个文件。--public:resources--README.md--src:code~/.vuercfile~/指的是当前用户目录，比如我的登录用户名是linong，在linux下是/home/linong，在window下它是C:\Users\linong。~/.vuerc包含手动选择的功能。在操作提示结束时，您可以选择将选择保存为预设，以便将来重复使用。vueCLI插件系统结构VueCLI使用基于插件的架构。查看新建项目的package.json，会发现依赖都是以@vue/cli-plugin-开头的。插件可以修改webpack的内部配置，也可以向vue-cli-service注入命令。在项目创建过程中，列出的大部分功能都是通过插件实现的。基于插件的架构使VueCLI灵活且可扩展。如果您有兴趣开发插件，请阅读插件开发指南。可以使用GUI通过vueui命令安装和管理插件，也可以使用命令行vueaddeslint。推荐使用vueui，图形界面还是比较好用的vue-cli命令，这部分不重要，可以直接跳过vueserveUsage:serve[options][entry]在开发环境模式下，零配置是.js或.vue文件启动服务器选项：-o,--open打开浏览器-c,--copy复制本地URL到剪贴板-h,--help输出使用信息vuebuildUsage:build[options][entry]inproductionenvironmentBuilda.jsor.vuefilewithzeroconfigurationinmode选项：-t,--target
