vue三大重点之vue cli

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构建项目选择配置：

   

   利用vue-cli 2构建好的项目：

   

3、vue-cli 3

因为刚刚已经使用

npm install -g @vue/cli

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

vue create 项目名称

来创建vue项目就好了

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

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

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

vue ui

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

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

构建vue项目不同：

cli2：

vue init webpack 项目名称

cli3：

vue create 项目名称

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

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

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