vue-cli2和cli3的使用和区别
vue-cli脚手架的使用
- 使用vue-cli可以快速搭建vue的开发环境,和webpack的配置
- 安装vue脚手架: npm install -g@vue/cli
- 上面安装的是vue cli3的版本,如果需要想按照vue cli2的方式初始化项目是不可以的,我们必须要拉取2.x的模板,需要安装全局的桥接工具(官方查看)
- Vue CLI2 初始化项目
vue init webpack my-project
- Vue CLI3 初始化项目
vue create my-project
CLI 2 的使用
初始化项目:web init webpack mytest(根据这个创建项目文件名),初始化出现配置选项:
//项目名称
Project name ...
//作者的信息,会默认从git中读取信息
Project description ...
Author ...
//vue创建的选项 1.runtime-compiler 2.runtime-only
vue build ...(一般选runtime-only)
//是否安装vue-router
Install vue-router? ..
//是否使用ESLint检测代码规范
use ESLint to link your code
//是否写单元测试 (一般不使用)
Set up unit tests
//是否使用Nightwatch来进行e2e测试 (2代表to e to e 点对点)
Setup e2e test with Nightwatch?
//使用npm或者yarn包管理工具
use npm
use yarn
Runtime-Compiler
和Runtime-only
的区别
runtime-compiler(v1)
(运行过程)): template -> ast -> render -> vdom -> UIruntime-only
(v2 1.性能更高, 2.代码量更少):render -> vdom -> UI- 那.vue文件中的template是由谁处理的呢? 是由vue-template-compiler这个开发时 工具依赖来处理的,他将.vue文件解析成了render函数,解析之后,是没有tamplate这个 东西的
- 总结:
- 如果在开发中,依然使用template,就需要选择Runtime-Compiler
- 如果在开发中,使用的是.vue文件夹开发,那么可以选择Runtime-Only
- render函数的使用
new Vue({
el:'#app',
render:(createElement) =>{
//使用方式一:
return createElement('标签','相关数据对象(可以不传)',['内容数组'])
//1.1render函数的基本使用
return createElement('div',{class:'box'},['xiaohuang'])
//1.2嵌套render函数
return createElement('div',{class:'box'},['小黄',createElement('h2',['标题啊'])])
}
})
`Runtime-Compiler`和`Runtime-only`在main.js中的不同使用: 1.`Runtime-Compiler`中
const cpn =Vue.component('cpn',{
template:'<div>我是cpn组件 </div>',
data(){
return{ }
}
}) 2.`Runtime-only`中
new Vue({
el:'#app'
render:(createElement)=>{
//使用方法二:传入一个组件对象
return createElement(cpn)
}
})
CLI 3的使用
- 初始化项目:vue create my-project
//选择一个配置方式
please pick a perset (一般选最后一个Manually select features(手动选择特性) )
//选择对于你的工程所需要的特性 (用空格选择)
check the features needed for your project
//对应的配置文件单独生成还是放在package.json里
where do you prefer placing config for babel
//要不要把刚才自己选择的配置保存下来
save this as a preset for future projects?
- pubilc文件相当于CLI2中的static目录
- 配置都去哪里了,可以启动配置服务器
vue ui
查看(全局命令)
vue-cli2和cli3的使用和区别的更多相关文章
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue路由传值params和query的区别
vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...
- vue/cli2.0优化
vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- Vue CLI3和Vue CLI2环境搭建
关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...
- Vue 中 export及export default的区别
相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...
随机推荐
- Java修饰符public,protected,default,private访问权限
public 具有最大的访问权限.所有类可访问. protected 主要是用来保护子类.自身.子类及同一个包中类可以访问 default 没有加修饰符的.有时候也称为friendly,它是针对本包访 ...
- deconstructSigs|探寻cosmic的独特“气质”-mutation signature !
deconstructSigs-mutation signature看一下你的数据是什么“气质”的? 本文首发于“生信补给站” https://mp.weixin.qq.com/s/k7yzk9hPX ...
- 【ES6】数值的扩展
1.Number.isFinite()和Number.isNaN()[只对数值有效] (1)Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity. [ ...
- 《Java基础知识》序列化与反序列化详解
序列化的作用:为了不同jvm之间共享实例对象的一种解决方案.由java提供此机制. 序列化应用场景: 1. 分布式传递对象. 2. 网络传递对象. 3. tomcat关闭以后会把session对象序列 ...
- [系列] Go 使用 defer 函数 要注意的几个点
概述 defer 函数大家肯定都用过,它在声明时不会立刻去执行,而是在函数 return 后去执行的. 它的主要应用场景有异常处理.记录日志.清理数据.释放资源 等等. 这篇文章不是分享 defer ...
- oopday01(面向对象-类&private&this)
面向对象基本概述.封装 01_面向对象(面向对象思想概述) * A:面向过程思想概述 * 第一步 * 第二步 * B:面向对象思想概述 * 找对象(第一步,第二步) * C:举例 ...
- Asp.Net MVC Webapi Eventsource 实现时效消息
ApiController 后端API public System.Net.Http.HttpResponseMessage GetUnknownNotices() { var user = Form ...
- 2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...
- .net core3.0部署Linux服务器 使用Docker容器和Nginx反代理教程
本人刚接触.net core 由于公司项目需要部署在Linux上 近些日子学习和网上大面积搜教程 我在这给大家归拢归拢借鉴的教程做了套方案(我写的可以实现 但不一定是最好的 仅供参考) 我只用过cor ...
- 线程提供的方法:static void sleep(long ms),会进入阻塞状态,休眠
package seday08.thread; import java.util.Scanner; /*** @author xingsir * 线程提供的方法:static void sleep(l ...