Vue cli 2.x 3.x及4.x区别

怼烎@ 2022-10-17 01:51 184阅读 0赞

在使用前优先是安装

安装：

npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

或者已安装后，需要安装最新的版本，需要卸载或更新

更新：

npm update -g @vue/cli
    # 或者
    yarn global upgrade --latest @vue/cli

卸载：

npm uninstall -g @vue/cli
    # or 
    yarn global remove @vue/cli

检查vue版本

vue --version
    # or
    vue -V

上述的这些指令是vue cli 3及4使用的

vue cli 1和2包的名称为  vue-cli  ，现在的包的名称为@vue/cli。已经安装了vue-cli的时候，需要先卸载:  **npm uninstall vue-cli -g  或 yarn global remove vue-cli。**

这个和上面的卸载方式对比，上方的卸载命令是vue cli 3/4的方式，而1/2卸载命令对比发现，主要是包的不同导致的。

### 创建项目 ###

1.x和2.x

vue init webpack project-name

3.x和4.x

vue create project-name

3.x和4.x在创建项目的时候，内部配置也是不一致的

### 运行项目 ###

1.x和2.x

npm run dev 
    // 或
    npm run start

3.x和4.x

npm run serve

vue cli3.x  最强大之处提供了 **vue ui** 命令，通过可视化界面来使用 GUI 安装和管理插件

这里需要注意区分 vue cli和vue，这两个是不同的东西，注意区分。。。。。。

这里演示vue cli 4.0安装项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

这里提示，vue cli版本问题不是最新的

这里有默认vue2及vue3及选择配置及自行配置的东西，一般选默认就直接安装运行项目完成了。

vue cli4安装后的目录

![2021060709432673.png][]

上述部分是安装命令的区别

### 区别 ###

*  首先很鲜明的一点，vue-cli 3.0的创建方式和vue-cli 2.0不同，这是因为vue-cli 3.0是构建在 **webpack 和 webpack-dev-server** 之上的，可以理解更高一级于2.0，并具备有新的配置和功能。
 *  vue-cli 3.0的项目目录结构也不同于vue-cli 2.0，3.0**摈弃了 config 、 build 、 static** 目录，**新增了 public** 目录，将根目录下的 **index.html** 放置在 **public** 目录下。
 *  新增 **webpack** 的配置文件 **vue.config.js** ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。
 *  新增 **.browserslistrc** 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。
 *  新增 **babel.config.js** 替代原先的.babelrc，具备和原先.babelrc一样的作用。
 *  重点来了，3.0最强大之处提供了 **vue ui** 命令，通过可视化界面来使用 GUI 安装和管理插件（当然也可以通过vue add plugin添加插件），例如使用 iView 按需引入的时候，可以直接在可视化界面中安装 vue-cli-plugin-iview，则可以实现按需引入。

参考：

[vue-cli2.0/3.0/4.0创建项目的方式差异解读和vue-cli4.0打包命令和环境配置 - 蓝色帅-橙子哥 - 博客园 (cnblogs.com)][vue-cli2.0_3.0_4.0_vue-cli4.0_ - _-_ - _ _cnblogs.com]

[Vue——vue-cli3.0对比2.0\_五柳-CSDN博客\_vue-cli2.0和3.0区别][Vue_vue-cli3.0_2.0_-CSDN_vue-cli2.0_3.0]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221014/3ff34b9186054f589df67ec9d6295be7.png
[2021060709432673.png]: /images/20221014/ae0783eb718a45e29667e1696f463ab9.png
[vue-cli2.0_3.0_4.0_vue-cli4.0_ - _-_ - _ _cnblogs.com]: https://www.cnblogs.com/lhl66/p/13570026.html
[Vue_vue-cli3.0_2.0_-CSDN_vue-cli2.0_3.0]: https://blog.csdn.net/qq_42049445/article/details/100047444