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均可用于导出常量.函数.文件.模块 ...
随机推荐
- python通过人脸识别全面分析好友,一起看透你的“朋友圈”
微信:一个提供即时通讯服务的应用程序,更是一种生活方式,超过数十亿的使用者,越来越多的人选择使用它来沟通交流. 不知从何时起,我们的生活离不开微信,每天睁开眼的第一件事就是打开微信,关注着朋友圈里好友 ...
- VueCLi3 配置less变量
Step1. 文档介绍 // vue-cli css预处理文档: https://cli.vuejs.org/zh/guide/css.html#自动化导入 // less文档: https://ww ...
- 4.Android-adt安卓打包过程、adb指令学习
本章学习adt安卓打包过程.adb指令学习.并通过adb将打包的APK发给设备 1.打包 在eclipse中已经帮我们实现打包了. 具体打包流程如下: 最终一个APK包含了如下: classes.de ...
- Python 中国象棋源码 V1
Pygame 做的中国象棋,一直以来喜欢下象棋,写了 python 就拿来做一个试试,水平有限,电脑走法水平低,需要在下次版本中更新电脑走法,希望源码能帮助大家更好的学习 python.总共分为四个文 ...
- OD 快捷方式及窗口说明
OD 快捷方式 其他窗口 L : log 保存日志信息 E :程序的所有模块的信息(加载基址,大小,OEP,路径) M :程序的内存映射视图 T :线程信息 W :窗口信息 H :句柄表 C :CPU ...
- ruby中的多线程和函数的关键字传参
1.实现ruby中的多线程 # def test1 # n = 1 # if n > 10 # puts "test1结束" # else # while true # sl ...
- PlayJava Day022
List接口: ArrayList:数组集合,底层使用数组,查询快,增删慢 LinkedList:链表集合,底层使用链表形式,查询慢,增删快 注意: 对于随机访问get和set,ArrayList优于 ...
- useradd命令详解(转)
1.作用 useradd或adduser命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s shell] [-c comment] [ ...
- 如何使用CAD删除命令?怎么删除图纸中线段
大家经常使用CAD制图软件来绘制图纸,那在绘制图纸的过程中有时候会出现一些问题,就是图纸中不小心多绘制了一个线段,那要怎么办呢?如何使用CAD删除命令?怎么删除图纸中线段呢?那下面小编就来教教大家具体 ...
- Angular-----代码风格指南!!!(很重要)
一:文件结构 1).单一规则:坚持每个文件只定义一样东西(例如服务或组件),考虑把文件大小限制在 400 行代码以内. 单组件文件非常容易阅读.维护,并能防止在版本控制系统里与团队冲突: 单组件文件可 ...