目录
背景
上篇《手把手学习Vue：Vue环境搭建》末尾提到了工程构建，没有详细给出操作步骤。今天单独拿出来我觉得还是非常有必要的，因为不同的配置项决定后面怎么编码。也希望学习的小伙伴们也重视这些基础环节，正所谓磨刀不误砍柴工。我用的都是最新版本的工具，目的是理清知识脉络。如果你是生产环境一定要用兼容性最成熟稳定的版本，不同的版本构建操作步骤也会有出入。顺便大家也要明确一个概念，Vue不是单纯一个框架，而是一堆框架的组合使用，所有需要各个版本都要兼容好，才会发挥最大的优势。
构建步骤
创建命令
vue create project_name
选择预设配置
- 第一个2.0的默认配置
- 第二个3.0的默认配置
- 第三个自定义配置，我一般选择这个，完成后保存一个模板，后面按保存的模板创建，方便快捷。
具体可选配置
- 除了默认的3个配置外，还会选择Router、Vuex、CSS，测试相关的先不选择。
- babel是一种多用途的JavaScript编译器，将JavaScript新版本语法转义为浏览器可执行的语法。
- TypeScript语法支持，选择之后会使用TypeScript语法来写JS。
- Vuex是状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
- UnitTesting是单元测试，站在程序员的角度测试。
- E2ETesting是端到端测试，站在用户的角度测试。
选择Vue版本
- 选择Vue的版本，3.X目前是beta版本不建议直接在生产环境使用，我做测试选择了3.X。
选择路由器模式
- 是否使用历史模式创建路由，选择yes。
- 还有Hash模式，URL地址中带#标识，我选择了Yes，生产环境可以选择No
选择CSS样式处理器
- CSS Pre-processors，是CSS预处理器：一种具有编程逻辑的CSS语言。允许使用类似变量、函数、继承、运算符等编程方法来编写CSS文件。
- node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现。
- 这里大家根据使用习惯选择一个即可，我选择了dart-sass。
选择代码校验规则
- Linter/Formatter是代码校验和格式化 。我这里使用ESLint + Prettier
- 选择而保存校验
选择配置文件处理方式
- 多配置文件格式
- 放到一个文件中，建议选择放到一个文件中
选择是保存本地模板
- 最后是否保存模板，一般建议不保存，因为每个项目的配置可能不一样，我这里选择了是。
- 如果选择了保存模板，下次创建的时候可以直接使用，将跳过选择过程，直接创建项目，节省效率。
项目创建成功
总结
- 开始没有把这块当成重点，没有深究每一个选项的作用。总是感觉缺少点什么，所以决定花点时间来一次搞清楚。
- 不同的配置选择会决定后面的编码方式，需要你学习不用的语法，尽量选择自己熟悉的，这样节省成本，也容易上手，这点很重要。
- 随着版本的更新，配置项和步骤也会变化，所以一定要注意所使用的版本。
