vue-cli2和vue-cli3 安装和项目创建

亦凉 2021-08-19 14:19 494阅读 0赞

**目录**

一，vue-cli2的安装和项目创建

（一）安装 vue-cli2

（二）创建vue-cli2项目

二， vue-cli3的安装和项目创建

（一） vue-cli3的安装

（二）vue-cli3项目创建

1，用dos命令的方式

2，图形化界面的方式

--------------------

#  一，vue-cli2的安装和项目创建 #

## （一）安装 vue-cli2 ##

在安装 vue-cli2之前，先要安装cnpm，参考：[https://blog.csdn.net/qq\_40323256/article/details/100825982][https_blog.csdn.net_qq_40323256_article_details_100825982]

安装 vue-cli2的命令如下：（下面的“-gd”中的“d”表示：包含了开发和运行环境的依赖。也可以不要d，最好加上）

cnpm i -gd vue-cli

![20190918220946366.png][]

查看vue-cli2的版本：（注意：“-V”中的v要大写）

vue -V

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

（注意：卸载vue-cli2命令：**cnpm uni -g vue-cli  ，**如果还是删不掉，就直接去根目录删掉）

![20190919170111425.png][]

## （二）创建vue-cli2项目 ##

1，新建文件夹，用来存放vue-cli2项目

（注意：常用dos命令：进入D盘：**D：**，打开文件夹：**cd 文件夹名**，新建文件夹：**md 文件夹名**，返回上一个目录：**cd..** ，查看当前文件夹中所有的文件：**dir**,）

2,创建一个基于webpack模板的新项目（如果之前安装过webpack，则可以跳过现在这个步骤）

（注意：全局安装指定版本的webpack命令：**npm install webpack@3.0.0 -g       **

webpack最好用3.x的，别用4.x的，不然会让下载webpack cli，有点麻烦）

命令：**vue init webpack '项目文件夹名称'**       ，注意：项目文件夹名称不要出现大写字母！

（注意：第一次新建项目速度会比较慢，大概需要10分钟）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

然后会出现两行命令，依次输入这两行命令，回车，不一会就出现了如下的地址：

![20190919165515865.png][]

在谷歌浏览器中输入：[http://localhost:8080][http_localhost_8080] ，若出现以下界面，表示项目创建成功！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

# 二， vue-cli3的安装和项目创建 #

## （一） vue-cli3的安装 ##

（注意：vue-cli3在安装之前，需要先删除旧版本，即vue-cli2）

cnpm i -g @vue/cli

vue-cli3的卸载：**cnpm uninstall -g @vue/cli **

然后用命令“vue -V”查看是否删除vue，如果没有删掉，就直接去文件夹里面删除vue文件夹即可

![20190919164747371.png][]

## （二）vue-cli3项目创建 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

### 1，用dos命令的方式 ###

vue create 项目名

注意：项目名不要有大写字母！！ 并且一定一定要选择**lint**!!!!!否则会遇到意想不到的错误（scss会疯狂报错）

![20200921235305253.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]，回车

空格键选择，上下键移动，回车键确认![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]![20200921235555186.png][]

![20200921235616219.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

然后提示是否将上面的设置设为预设，输入n表示不设预设，输入y表示设置预设，然后写个预设名

出现以下界面后，照着提示输入命令即可

![20200922000438458.png][]

在谷歌浏览器中输入以下地址

![20190919162530523.png][]

出现以下界面表示项目创建成功了！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8][]

### 2，图形化界面的方式 ###

输入命令：**vue ui**

![20190919170533101.png][]

然后会跳转到浏览器，如果浏览器没反应，就换个浏览器（如谷歌浏览器），重新输入地址：[http://localhost:8000/][http_localhost_8000]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9][]

等“启动app”按钮可点击时，点击即可启动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 10][]

出现以下界面即成功！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 11][]

另外：如果想将项目部署到github上，下面这种方式不易出错

1，新建文件夹**test\_git**作为仓库

2，在桌面版GitHub上新建名为**test\_git的仓库**

3，在**test\_git**文件夹中选中路径，输入cmd

4，输入命令 **vue create 项目名** 创建vue3项目

5，在桌面版GitHub提交项目

[https_blog.csdn.net_qq_40323256_article_details_100825982]: https://blog.csdn.net/qq_40323256/article/details/100825982
[20190918220946366.png]: /images/20210725/9505c3ee1d9142e4ba026d9117eac9c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/4863a52d17094f0cafdae4b85657bd91.png
[20190919170111425.png]: /images/20210725/4c6b97f1131f447a9bf63eeecf6dfb2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/9a7a9a40ff824271a6b0c9664ee9361f.png
[20190919165515865.png]: /images/20210725/664ab36479274ff7a06dbd8a35fd3f01.png
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/93c9163e7cd747c089e11385008e9b9a.png
[20190919164747371.png]: /images/20210725/0b49eaf7f69343698a187b892dfb3652.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/6ecc4359b4734c9db3420b959d3ab827.png
[20200921235305253.png]: /images/20210725/09c3fc7ca35446e5856ff5a670c19475.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/3f2ff6977769425b9a25970adfa8e7e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/e872c66273a84cc9bb7fd76c5f3b19e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200921235536914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20200921235555186.png]: /images/20210725/0780257d01d145089d9e0f5a6471a34c.png
[20200921235616219.png]: /images/20210725/f6c41e2b5df844f3b22a6238fc5b63d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/cff5ebd33a8248d19985e0dae6cb01e9.png
[20200922000438458.png]: /images/20210725/1392c39936374530b9b27a0687cd37dc.png
[20190919162530523.png]: /images/20210725/cac1f3b80eae40b5b32365fea7a04ae1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8]: /images/20210725/75cfe0dcff3648988dde15b633f1a1d6.png
[20190919170533101.png]: /images/20210725/9180365c418942ebb9ea634d8a0b4295.png
[http_localhost_8000]: http://localhost:8000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9]: /images/20210725/2bf551792f554e91a1dfb44318cf0bcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 10]: /images/20210725/16a6574381234a0b94f58132cbdb8c54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 11]: /images/20210725/19c4052c7d64472c8dbc81ebb17f17cb.png