1.Vue 两个版本的区别
- 特点:完整版的Vue有compiler编译器,非完整版Vue则没有。导致完整版的Vue比非完整的Vue多了40%的体积。
- 视图:完整版的Vue的视图是写在html或template选项中,非完整版Vue写在render函数中,用h来创建标签,h的名字可以改成任意的名字。
- cdn引入:完整版使用vue.js引入,非完整版使用vue.runtime.js引入
- webpack引入:默认使用非完整版Vue,引入完整版Vue需要配置alias。
- @vue/cli引入:默认使用非完整版Vue,引入完整版Vue需要额外配置。
*实际开发中最佳体验是总是使用非完整版本Vue,配合vue-loader和vue文件。可以保证用户体验,用户下载的js文件更小。缺点是只支持h函数。
2..两个版本引入时对应的文件名
完整版Vue:vue.js
不完整版Vue:vue.runtime.js
3.template 和 render 怎么用?
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
4.template与render函数对比
1)相同之处:
render 函数 跟 template 一样都是创建 html 模板
2)不同之处:
Template适合逻辑简单,render适合复杂逻辑。
使用者template理解起来相对容易,但灵活性不足;自定义render函数灵活性高,但对使用者要求较高。
3)render的性能较高,template性能较低。
4)基于上一点,我们通过vue组件渲染流程图知道,使用render函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误
5)render 函数的优先级要比template的级别要高,但是要注意的是Mustache(双花括号)语法就不能再次使用。
5.使用vue/cli的方法搭建一个vue项目
1)全局或局部安装:yarn global add @vue/cli(可以指定版本号)
2)创建一个项目:vue creat 项目文件名(在当前目录创建,也可以自己指定路径)
3)选择要使用的配置:空格选中选项
4)打开创建的目录,运行yarn server ()
6.如何用 codesandbox.io 写 Vue 代码
- 进入官网
- 点击 "Create a Sandbox, it's free"
- 选择 "Vue"
三步就可以创建一个Vue项目!还可以把创建开发好的项目代码下载到本地:选择左上角的file——然后Export to ZIP