vue-cli2.0与vue-cli3.0区别
首先你要熟悉vue-cli2.0
1.项目目录结构
可以明显的看出来,vue-cli2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了css预处理器,所以看上去内容更丰富哈)
vue-cli3.0移除了配置文件目录,config
和 build
文件夹
同时移除了 static
静态文件夹,新增了 public
文件夹,细心的你,打开层级目录还会发现, index.html
移动到 public
中
2.配置项
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中,配置方法不变
在3.0中,vue.config.js中有关于mock的配置
要注意的是:mockjs是用来模拟产生一些虚拟的数据,方便前端在后端接口还没有开发出来时独立开发
即使使用了真实的url,但是mockjs拦截了ajax请求,返回的是设定好的本地数据
如果你想正常从后端获取数据,就要关掉mock的使用,我是直接删掉的,当然你可以选择别的办法
main.js中有一段关于mock.js的描述(注意上线前要去掉你的mock)
3.可视化界面
找到项目,vue ui 命令会直接打开可视化界面,里面可以进行配置、依赖等操作
对于不喜欢命令行的朋友可以说是非常友好了
4.其他
全局安装vu-cli 3.0
npm install -g @vue/cli
如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli )
安装完 3.0 后,有以下两种创建项目的方式:
1: vue create < project-name>
然后会出现默认和手动两个选项,跟着步骤走就好(傻瓜式操作)
2: 用视图创建项目 vue ui (上面已经说了)
在2.x0中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行
而在3.0中,只有依赖那个属性的 watcher 才会重新运行 ,这样使得变更通知更加精准
原文地址:https://www.cnblogs.com/wtsx-2019/p/12487158.html
- 归档模式下四种完全恢复的场景(r6笔记第8天)
- Git与Repo快速入门
- 10g,11g中的数据库克隆安装(r6笔记第7天)
- CVE-2017-16943 Exim UAF漏洞分析——后续
- “盲”逆向:iOS 应用 Blind 寻踪
- 根据时间字段导入数据的问题总结 (r6笔记第6天)
- Gnuboard 漏洞分析
- 一次数据库宕机问题的分析(r6笔记第5天)
- PWN学习之house of系列(一)
- 清理session的小插曲(二) (r6笔记第4天)
- 3.训练模型之在GPU上训练的环境安装
- 深度学习对话系统实战篇 -- 简单 chatbot 代码实现
- pangrank算法--PageRank算法并行实现
- 刷爆朋友圈的 deepfakes 视频人物换脸是怎样炼成的?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现微信对账单处理
- Laravel5.1框架路由分组用法实例分析
- PHP的HTTP客户端Guzzle简单使用方法分析
- laravel 框架实现无限级分类的方法示例
- 详解Laravel5.6通过路由进行API版本控制的简单方法
- php+layui数据表格实现数据分页渲染代码
- thinkPHP框架乐观锁和悲观锁实例分析
- PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
- laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
- Laravel框架实现即点即改功能的方法分析
- PHP使用PDO实现mysql防注入功能详解
- laravel接管Dingo-api和默认的错误处理方式
- PHP接入微信H5支付的方法示例
- PHP中用Trait封装单例模式的实现
- laravel 解决Validator使用中出现的问题