Vue-cli脚手架2.0和3.0创建项目的区别
1、项目命令
1-1、3.x版本的Vue脚手架安装
npm install -g @vue/cli
1-2、3.0创建项目
vue create 项目名称
1-3、兼容安装2.0Vue-cli
存在vue-cli3.0后,安装2.0需要一个桥接工具
才能使 vue-cli 2.x创建项目
npm install -g @vue/cli-init
1-4、2.0创建Vue项目:
vue init webpack 项目名称
2.比较项目目录
vue-cli2.0 | vue-cli3.0 |
---|---|
去掉了 config 、 build 、 static 目录 | 新增 public 目录 |
- | 新增 webpack 的配置文件 vue.config.js 可以进行webpack 的配置 |
- | 新增 .browserslistrc 文件,指定了项目的目标浏览器的范围 |
npm 时
@next
的含义:
首先,npm install name@latest
,latest
是模块版本的一个tag
,会对应到模块的一个具体版本;
然后,@next
一般表示下一个发布的版本,但它只是一个标识,用来找到对应的版本,需要项目开发者打包上传的时候手动添加。(人话就是,@next 一般表示最新版本,但实际还是要看开发者设置的具体是什么)
3.启动项目
3.x启动项目:
npm run serve
2.x启动项目:
npm run dev 或 npm run start
4.配置项
vue-cli2.0 配置主要通过,.env.production
和.env.development
文件
vue-cli3.0 中,主要通过 vue.config.js
实现
5.vue-cli3.0 增加了可视化
安装 node.js -> 安装webpack -> 安装vue脚手架 -> 启动vue ui ,即可启动。
1.安装 nodejs
2.安装 webpack
npm install webpack -g
3.安装 webpack-cli 脚手架
npm install webpack-cli -g
4.安装vue脚手架
npm install -g @vue/cli
5.启动 vue ui