初识Vue-cli 3创建项目

环境安装

---

在这里我们截取官网的图片简单方便

安装完成之后可以使用此命令检查您是否具有正确的版本

如上图显示则表示安装成功

创建项目

---

vue-cli3使用命令 vue-create projiectName 创建项目，弃用了vue-cli2的 vue init

可以自由选择基本Babel + ESLint设置附带的默认预设，也可以选择“手动选择功能”以选择所需的功能。

现在我们选择了自由配置，配置项如下:

• 上↑ 与 下↓ 键切换目标选项，空格键选中或取消，a键全选，i键反选，回车确定选项（数字1-9对应9个选项）可直接按数字选中或取消
• Babel：将ES6编译成ES5
• TypeScript：JS超集，新增选项卡
• PWA：模拟原生app，渐进式网络应用程序
• Router：Vue路由
• Vuex：Vue状态管理器
• CSS Pre-processors：CSS预处理器
• Linter/Formatter：代码规范
• Unit Testing：组件单元测试,开发过程中前端对代码进行自测
• E2E Testing：端对端测试，模拟用户真实场景

这里会提示是否使用路由器的历史模式？（需要为索引回退设置正确的服务器）（是/否）

这种模式利用 history.pushState API 来完成 页面跳转而无须重载页面

这里我们选择Yes

选择何种CSS预编译器，这里童鞋们根据个人喜好选择即可，博主选择的是第一种

选择何种代码规范配置，博主选择的是第一种

• ESLint with error prevention only：只进行报错提醒
• ESLint + Airbnb config：不严谨模式
• ESLint + Standard config：正常模式
• ESLint + Prettier：严格模式

这里选择语法检查的方式 1、保存就检查 2、fix和commit时候检查，根据个人喜好即可，博主选择的是第一种

这里提问选择哪一种单元测试 插件，根据实际情况选择

这里提示把babel,postcss,eslint这些配置文件放哪，1：独立文件 2：package.json     根据自己喜好(推荐放在package.json中)

最后呢，提问 是否记录一下？ 下次继续使用这套配置，这里我们就选择不记录了，选N

OK，这样就等待安装完成即可

安装完成后，我们开始进入项目根目录，进行项目测试

项目运行成功，完结撒花