【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

猜你喜欢

转载自blog.csdn.net/weixin_39602178/article/details/84678948