使用@vue/cli脚手架创建项目

一、首先确保已安装node

在终端中验证：

node -v

npm -v

二、安装vue脚手架工具

安装时可以指定版本号，默认安装的是5版本。

npm install -g @vue/cli

npm install -g @vue/cli@版本号

---

VUE CLI的包名称已经由vue-cli改成了@vue/cli。如果已经全局安装了旧版本的vue-cli（1.x或2.x），需要先通过npm uninstall vue-cli -g或 yarn global remove vue-cli 卸载它。

npm uninstall vue-cli -g

yarn global remove vue-cli

三、使用vue create创建vue项目

1.如果是创建老结构的项目，需要先安装vue桥接工具，然后使用vue init webpack命令来创建项目。

#vue桥接工具（创建老结构的项目需要安装vue桥接工具）

npm install -g @vue/cli-init

#创建项目

vue init webpack hello-world

---

2.如果创建新结构的项目，直接使用vue create命令就可以了。

vue create hello-world

---

3.以新结构项目为例:

（1）选择预设配置

- 默认的vue2配置：含有了babel和eslint。

- 默认的vue3配置：含有vue 3，babel，eslint。

- 手动选择。

---

（2）手动选择：空格键选择，a键全部选择，i键反向选择。

- Babel：es6 转 es5 。

- Router：路由 。

- Vuex：数据容器，存储共享数据 。

- CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus等。

- Linter / Formatter：代码格式校验。

四、运行项目

这时项目初始化完成了。终端提示，接下来的操作如下，照做即可。

cd hello-world

npm run serve

浏览器输入：http://localhost:8080