vue三大重点之vue cli

小灰灰 2021-09-03 07:45 299阅读 0赞

# vue三大重点之vue-cli #

## 1、什么是vue-cli？ ##

vue-cli（vue脚手架）就是vue官方的基于webpack的用于快速初始化构建vue项目的工具。就像建房子最开始的骨架需要用到的脚手架一样，它是一个能提高开发者工作效率的工具。能够辅助开发者快速地搭建好vue项目所需要地项目目录以及架构。

因为vue-cli是基于webpack的，所以它有许多webpack的影子，但是却简化了webpack的相关配置。相当于vue-cli是webpack用于vue的个性化定制版，并且官方简化了许多配置。

## 2、vue-cli 2 ##

vue-cli 2是使用得最多的一个版本。

1.  利用npm安装vue-cli 2
    
        npm install -g @vue/cli
    
    因为现在vue-cli 3已经发布了，所以上面这条命令实际上安装的是vue-cli 3（-g全局安装），所以我们想要使用vue-cli 2还需要拉取vue-cli 2的模板
2.  利用npm拉取vue-cli 2的模板
    
        npm install -g @vue/cli-init
    
    依旧是全局安装
3.  利用vue-cli 2构建vue项目
    
        vue init webpack 项目名称
4.  vue-cli 2构建的vue项目的目录结构
    
    vue-cli 2构建项目选择配置：
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center]
    
    利用vue-cli 2构建好的项目：
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 1]

## 3、vue-cli 3 ##

因为刚刚已经使用

npm install -g @vue/cli

已经安装了vue-cli 3脚手架了所以就不需要再重复安装了。只需要利用

vue create 项目名称

来创建vue项目就好了

vue-cli 3构建项目是需要选择的配置：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 2]

vue-cli 3构建完成的项目的目录结构：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 3]

同时利用vue-cli 3还有一个强大的一点就是可视化项目管理：

vue ui

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 4]

可以直接在web里管理项目的插件以及依赖项，甚至可以启动、重启、关闭项目。

## 4、vue-cli 2和vue-cli 3主要的区别 ##

构建vue项目不同：

cli2：

vue init webpack 项目名称

cli3：

vue create 项目名称

构建项目的配置选项也不同

构建好的项目的目录结构也不同

同时cli3还支持可视化管理项目。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/413bf206729d429e84f2c36b9295493d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/e305134046df4e30a255a4e87573ce54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/fb7f71f3ee194b2c80e771a8625c0293.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/9f61a125941648ac83d4e509e36117cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210813/e74e839cfdb64f54bb504a45780540a5.png