Vue 学习之路（一）- 创建脚手架并创建项目

安装脚手架

命令 npm install -g @vue/cli

打开 cmd 窗口输入以上命令。当出现以下界面即表示安装完成。

查看已安装脚手架版本

命令 vue -V

在 cmd 窗口输入以上命令

可以看出当前版本为 5.0.4。

创建项目

命令 vue create 项目名称

在 cmd 窗口输入 vue create vue-demo

输入 y

使用方向键上下选中选项 Manually select features （自由选择），回车

使用方向键上下选择要安装的选项， 点击空格键用于勾选/取消要安装的内容选项。勾选的内容前面括号内会显示一个星号“*”。

选项说明

选项	说明
Babel
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors
Linter / Formatter	检查代码中定义的变量定义后是否被使用
Unit Testing
E2E Testing

选择完成后，敲击回车键完成选择，并进入 vue 版本的选择

此时选择 vue 3.x 敲击回车

此时用于确认路由器是否使用历史模式？（需要为生产中的索引回退进行适当的服务器设置）。
输入 n 敲击回车

使用方向键上下选择 Less， 敲击回车

使用箭头键选择linter/formatter配置

选项说明

选项	说明
ESLint + Airbnb config	使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置。只检测错误
ESLint + Standard config	使用 ESLint 官网推荐的规则 + Standard 第三方的配置。自带 linter 和 自动代码纠正，没有配置，自动格式化代码，可在编码早起发现规范问题和错误
ESLint + Prettier	使用 ESLint 官网推荐的规则 + Prettier 第三方的配置，Prettier 主要是做风格统一。代码格式化工具

选择 ESLint + Prettier， 敲击回车

设置格式化时间

选项	说明
Lint on save	保存时检测
Lint and fix on commit	用户提交文件到 git 时检测

选择 Lint on save， 敲击回车

你更喜欢把Babel、ESLint等的配置放在哪里。？

选项	说明
In dedicated config files	在专用配置文件中，即单独管理
In package.json	在package.json文件

选择 In package.json ， 敲击回车

是否将此保存为未来项目的预设？（是/否）

输入 n ， 敲击回车

等待安装完成。

当出现以下界面内容时，即表示项目创建完成。

项目文件被放置在 C:\Users\Earen\vue-demo 目录中。

此时可以输入命令 cd vue-demo 进入 vue-demo 目录中。

输入命令 npm run serve 启动项目

·