【vue】Vue CLI 3创建项目

前提条件

① 若你的计算机已经安装了旧版本的vue-cli，你需要先卸载它。

npm uninstall vue-cli -g

② 卸载完旧版本之后，安装新版本。（注：node.js版本要求8.9以上）

npm install -g @vue/cli

③ 使用vue --version检查当前版本是否正确。

---

创建项目

推荐使用cmd来创建，因为涉及到一些设置。

① 新建项目hello-world（项目名可自定义，但不能有大写字母）

vue create hello-world

②回车之后出现以下提示，即选择一个preset（通过上下键来选择，cmd的好处就体现了）
1>默认，包含babel+eslint设置的preset
2>手动选择特性（即需要自己一步步的选择自己的项目所需的特性）

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

若选择1，则项目直接创建完成；选择2，则继续往下走。

③ 选择2之后，出现以下特性供你选择，若需要的按空格选中：

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing

我选择了以上几个（带*的项）。

③ 进行更详细的配置：
一问，是否要history模式，我选否；
二问，要用何种css预处理器，（根据自身情况选）；
三问，选择Linter / Formatter规范类型，我选ESLint + Standard config
…
之后我都是回车
…
最后一问，是否将此作为将来项目的配置，我选了否

④ 开始创建，需要等待一会儿

---

结语

至此项目创建完成。
可以cd到该项目目录下，执行以下命令，打开localhost:8080查看项目。

npm run serve

---

补充

使用图形化界面：
cd 到该项目目录下，输入以下命令之后会打开图形化界面。

vue ui

---

问题记录

1. vue create项目时，出现以下报错：

npm ERR! Unexpected end of JSON input while parsing near

解决：

npm cache clean --fore