安装vue-cli的步骤

1、安装node:检查方式：node --version

2、安装npm :检查方式：npm --version

(要4.0)以上的版本才支持安装vue-cli，升级或安装npm的命令行代码是

npm install cnpm -g

3、安装vue

$ cnpm install vue

检测vue是否安装成功的方法是 在命令行（或者nodejs目录下）执行vue -V的命令（第二个V是大写）。如果提示说vue不是内部或外部命令，则可以在系统属性的环境变量中加入npm.cmd的安装目录。如我的是C:\nodejs这个目录下有npm.cmd文件，则可以在环境变量的最后加入英文分号，再加上C:\nodejs。保存环境变量设置窗口后重启命令行工具，再次在nodejs文件目录下执行 vue -V检查vue是否安装成功。

4、全局安装vue-cli脚手架

npm install vue-cli -g

5、使用vue-cli来构建项目

在nodejs文件下执行（vue init webpack <项目名称>）

   如果想要使用快捷的项目创建方式，可以使用

   vue init webpack-simple 项目名称

使用vue3里面的图形化界面创建项目：

cnpm install -g @vue/cli

vue create hello-world

运行vue ui后，会自动弹出一个图形化创建项目的页面。

执行这段命令之后，会在当前目录生成以这个项目名称命名的文件夹。

根据提示输入信息，遇到不能输入的地方，直接敲回车。

6、访问主页

在安装好项目之后，根据提示可以输入网站访问地址。安装好的项目见下图。

7、后续工作

（1）如果要在安装好项目之后要给项目安装路由文件，cd到项目路径下后输入：npm install vue-router --save

随后会看到，在package.json里看到多了vue-router的配置文件信息。

8、启动及打开文件

cd到安装好的项目文件下，执行npm run dev/npm run start，成功后输入localhost:8080即可访问本地项目。

9、打包上线

在项目文件目录下执行npm run build后会在项目文件中生成dist文件夹，项目上线时，只需要将 dist 文件夹放到服务器就行了。