Vue-cli脚手架2.0和3.0创建项目的区别，以及4.0的使用

一时失言乱红尘 2022-11-19 12:57 107阅读 0赞

### ![55a3ca1af5b7c49b52ae5e639a9ba66f.png][]![42f586d1f405ce2b2582b2c41674428b.png][] ###

### 一、生成项目命令 ###

1、安装3.x版本的Vue脚手架：

npm install -g @vue/cli

创建Vue项目命令：

vue create 项目名称

或基于ui界面创建Vue项目，命令：vue ui

2、安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目

需要安装一个桥接工具才能使用 vue-cli 2.x创建项目

npm install -g @vue/cli-init

创建Vue项目：

vue init webpack 项目名称

### 二、目录的区别 ###

![0d9a4a7681576c92e22baf138389f300.png][]

vue-cli 3.0的项目摈弃了 config 、 build 、 static 目录，新增了 public 目录，将根目录下的 index.html 放置在 public 目录下。

新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。

新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。

新增 babel.config.js 替代原先的.babelrc，具备和原先.babelrc一样的作用。

src文件夹中多了 views 文件夹，相比2.0，在 index.js 变为了 router.js

2.0版本相比3.0版本 有build和config文件夹等，src文件夹中有router文件夹，里面有index.js

### 三、启动项目 ###

3.x启动项目：

npm run serve

2.x启动项目：

npm run dev  或   npm run start

### 四、配置项 ###

vue-cli2.0的域名配置，分为开发环境和生产环境，所以配置域名时，需要在config中的dev.env.js和prod.env.js中分别配置

前面说过，到了3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同

当然，没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

![2086304a1f6f293bec701f9d8451d5ad.png][]

在3.0中，vue.config.js中有关于mock的配置

要注意的是：mockjs是用来模拟产生一些虚拟的数据，方便前端在后端接口还没有开发出来时独立开发

即使使用了真实的url，但是mockjs拦截了ajax请求，返回的是设定好的本地数据

如果你想正常从后端获取数据，就要关掉mock的使用，我是直接删掉的，当然你可以选择别的办法

main.js中有一段关于mock.js的描述（注意上线前要去掉你的mock）

![ffb8a8fc25d61e76798e3944873641b2.png][]

另外3.0还多了可视化界面，找到项目，vue ui 命令会直接打开可视化界面，里面可以进行配置、依赖等操作。

[55a3ca1af5b7c49b52ae5e639a9ba66f.png]: https://img-blog.csdnimg.cn/img_convert/55a3ca1af5b7c49b52ae5e639a9ba66f.png
[42f586d1f405ce2b2582b2c41674428b.png]: /images/20221119/ca7ea9c109d34ad9a6549daa5bda9eed.png
[0d9a4a7681576c92e22baf138389f300.png]: https://img-blog.csdnimg.cn/img_convert/0d9a4a7681576c92e22baf138389f300.png
[2086304a1f6f293bec701f9d8451d5ad.png]: https://img-blog.csdnimg.cn/img_convert/2086304a1f6f293bec701f9d8451d5ad.png
[ffb8a8fc25d61e76798e3944873641b2.png]: https://img-blog.csdnimg.cn/img_convert/ffb8a8fc25d61e76798e3944873641b2.png

发表评论取消回复

表情：

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

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

相关阅读

相关使用vue-cli脚手架创建项目

1.首先肯定要安装node和npm（国内可以使用cnpm镜像\[China npm\]）。 http://nodejs.cn/ ![选择.msi结尾的安装包进行下...

水深无声/ 2024年04月18日 04:04/ 0 赞/ 101 阅读

相关【Vue】day03-VueCli（脚手架）

day03 一、今日目标 1.生命周期 1. 生命周期介绍 2. 生命周期的四个阶段 3. 生命周期钩子 4. 声明周期案例 2.综合案例-小黑记

布满荆棘的人生/ 2024年03月18日 00:32/ 0 赞/ 135 阅读

相关 Vue-cli 脚手架创建以及打包发布项目

文章目录准备环境下载模板运行项目项目结构创建一个子组件根组件

超、凢脫俗/ 2023年06月03日 12:53/ 0 赞/ 64 阅读

相关 vuecli脚手架目录介绍

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

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

相关 Vue-cli脚手架2.0和3.0创建项目的区别，以及4.0的使用

![55a3ca1af5b7c49b52ae5e639a9ba66f.png][]![42f586d1f405ce2b2582b2c41674428b.png][] 一

╰半夏微凉°/ 2023年01月05日 12:12/ 0 赞/ 62 阅读

相关 vuecli脚手架配置文件说明

vuecli脚手架座右铭：越努力越幸运，越运动越健康。热爱计算机技术，热爱运动的这样一个人 -------------------- 文章目录 vuec

快来打我*/ 2022年12月23日 11:29/ 0 赞/ 267 阅读

相关使用脚手架创建uni-app项目

> 闲来无事写写小程序，于是想用uni-app框架来实现，本文将会对创建步骤进行详解。前言本文主要针对小程序框架uni-app的创建展开介绍，如果你也是新手那就可以

深碍√TFBOYSˉ_/ 2022年12月23日 09:58/ 0 赞/ 505 阅读

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

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

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

相关 Vue-cli脚手架2.0和3.0创建项目的区别，以及4.0的使用

![55a3ca1af5b7c49b52ae5e639a9ba66f.png][]![42f586d1f405ce2b2582b2c41674428b.png][] 一

一时失言乱红尘/ 2022年11月19日 12:57/ 0 赞/ 108 阅读

相关 Koa脚手架创建项目

1、全局安装 npm install koa-generator -g 2、创建项目 koa koa\_cli 3、安装依赖 cd koa\_cli n

男娘i/ 2022年04月15日 03:39/ 0 赞/ 378 阅读