vue-cli4脚手架安装和项目创建

1、安装node.js

检测是否安装，cmd命令，可查看版本号。如未安装，先自行安装。

node -v

2、安装npm

检测是否安装，cmd命令，可查看版本号。 npm：包/组件安装操作命令。

nmp -v

3、安装vue-cli4

查看安装版本，cmd命令。注意这里-V是大写。

vue -V   

如果已经安装过vue-cli2或者3，需先进行卸载。

卸载命令，(cmd任意位置)。如果npm没卸载成功，可使用cnpm尝试。卸载后使用vue -V验证。

//卸载cli2
npm uni vue-cli -g   

//卸载cli3-4
npm uni @vue/cli -g 

未安装或者卸载成功后，开始安装vue-cli4。安装命令如下：（如需安装3，携带版本号即可，如：@3.11.0）

cnpm install -g @vue/cli

安装vue-cli2的命令是：cnpm install -g vue-cli   注意区别。

cnpm是使用淘宝服务器路径，与npm功能一样。区别就是cnpm国内服务器，比npm快。

4、启动vue-cli4图形界面

启动命令：

vue ui

启动成功访问窗口弹出的地址，http://localhost:8000  。结果如下图

 可以使用该图形界面创建项目，也可以使用npm命令创建，命令方式下面介绍。

图形创建方式如下：

 下面是选择安装的包/插件。可以根据自己需求选择，也可以跟我一样暂时只安装这两项。后期需要使用其它的，可以单独安装。

 点击下一步。再点击创建项目。是否保存预设是该次的操作，可以根据需要选择是否保存。创建成功后，如下图。

 点击插件，可以查看已经安装的插件，也可以继续安装其它的或者卸载。

 启动项目：

5、使用命令行创建项目

 创建命令：

vue create 项目名

 按上下键选择，我们这里选择手动安装。选中Manually回车、

同样按上下键选择，按空格键开关。带*是打开。回车确定。

接下会选择vue版本。我这里选择了3。回车确定。（忘记截图了）

 是否使用history。y是

 接下来选package.json。 回车后输入y确认。

后面的选项直接回车，选择默认即可。

等等下载安装。

安装成功后如下图：

 按照提示：输入 cd vuetest3进入项目目录。（vuetest3是我项目名称）

npm run serve 启动项目。注意serve后面没r，不要输错。

 访问启动后的地址，看下下图，即启动成功。