初识Vue-cli 3创建项目

环境安装


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

初识Vue-cli 3创建项目_第1张图片

初识Vue-cli 3创建项目_第2张图片

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

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

创建项目


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:端对端测试,模拟用户真实场景

初识Vue-cli 3创建项目_第3张图片

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

这种模式利用 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,这样就等待安装完成即可

初识Vue-cli 3创建项目_第4张图片

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

项目运行成功,完结撒花

初识Vue-cli 3创建项目_第5张图片

 

你可能感兴趣的:(Vue项目学习)