vue-cli2/3/4的区别

秒速五厘米 2022-11-19 12:57 153阅读 0赞

1、安装、卸载

**vue-cli2**：

全局安装：npm install -g vue-cli 或 cnpm install -g vue-cli
    卸载：npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli

*  1
 *  2

**vue-cli3**：

全局安装：npm install -g @vue/cli@版本号 或 cnpm install -g @vue/cli@版本号
    卸载：npm uninstall -g @vue/cli@版本号 或 cnpm uninstall -g @vue/cli@版本号

*  1
 *  2

**注**：原cli3的安装指令为@vue/cli，因为cli4的出现同样使用了@vue/cli，所以想要安装3的版本，就需要在@vue/cli后面加上@版本号（例：npm install -g @vue/cli@3.11.0）。  
*查看版本号*：[https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md\#][https_github.com_vuejs_vue-cli_blob_dev_CHANGELOG.md].

**vue-cli4**：

全局安装：npm install -g @vue/cli 或 cnpm install -g @vue/cli
    卸载：npm uninstall -g @vue/cli 或 cnpm uninstall -g @vue/cli

*  1
 *  2

2、项目创建

**vue-cli2**：

vue init webpack demo　　//webpack是最常用的，demo 为项目名称，项目名称不能出现大写字母

*  1

**vue-cli3/vue-cli4**：

vue create demo    　　　　  //demo 为项目名称

*  1

3、项目结构

**vue-cli2**：  
![在这里插入图片描述][20200603140743855.png]  
**vue-cli3**：  
![在这里插入图片描述][20200603140236869.png]  
**vue-cli4**：  
![在这里插入图片描述][20200603140906164.png]

4、项目启动

**vue-cli2**：

npm run dev

*  1

**vue-cli3/vue-cli4**：

npm run serve

[https_github.com_vuejs_vue-cli_blob_dev_CHANGELOG.md]: https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md#
[20200603140743855.png]: /images/20221119/ff59a317fb0d451abfd37ec389428936.png
[20200603140236869.png]: /images/20221119/bfd6c820176149f593e1ac0025fbe950.png
[20200603140906164.png]: /images/20221119/544f443bd8cb4ee39e20ea0c5e4bae77.png

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 vueCli pwa模式增加

vue-cli2X或者vue-cli3X 文档见[官网][Link 1] 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。配置常用的是

港控/mmm°/ 2023年07月18日 14:16/ 0 赞/ 174 阅读

相关 vuecli脚手架目录介绍

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

小鱼儿/ 2023年01月23日 09:59/ 0 赞/ 19 阅读

相关 vuecli3 多页面配置

vuecli3 多页面配置项目结构 1. login文件配置（有配置路由） login文件目录 lo

落日映苍穹つ/ 2023年01月19日 03:24/ 0 赞/ 440 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

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

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 333 阅读

相关使用VueCLI脚手架创建项目

\\VueCLI脚手架创建项目安装脚手架 \[VueCLI官网\] (https://cli.vuejs.org/zh/guide/installatio

素颜马尾好姑娘i/ 2022年11月21日 09:58/ 0 赞/ 411 阅读

相关 234. Palindrome Linked List

Given a singly linked list, determine if it is a palindrome. Follow up: Could you do

布满荆棘的人生/ 2022年08月21日 03:30/ 0 赞/ 22 阅读

相关 234 Palindrome Linked List

题目要求在O(n)时间和O(1)空间内判断一个链表是不是回文的。先将链表分成2部分，然后反转其中一个，在进行比较。 / Definition for sing

矫情吗；*/ 2022年08月04日 04:17/ 0 赞/ 172 阅读

相关 Codeforces Round #234A

Inna and choose option 题意：一个由12个字符('O'或'X')组成的字符串，这12个字符可以排列成a\b（a\b=12）的矩阵，要求

古城微笑少年丶/ 2022年06月16日 05:23/ 0 赞/ 162 阅读

相关 234.Palindrome Linked List

/\ Given a singly linked list, determine if it is a palindrome. Follow up: C

╰半橙微兮°/ 2022年06月08日 22:22/ 0 赞/ 150 阅读

相关 234. Palindrome Linked List

/ Definition for singly-linked list. struct ListNode { int val

灰太狼/ 2022年04月03日 13:26/ 0 赞/ 174 阅读