前提条件
① 若你的计算机已经安装了旧版本的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