1. vue的两个版本
两者都可以通过cdn应用，他们的区别在于：
- 文件名：
- 完整版文件名：vue.js
- 非完整版文件名： vue.runtime.js
- 生产环境后缀名为：.min.js
- 使用方法：
- 完整版视图写在HTML标签或templa中：
// 需要编译器compiler
new Vue({
template: '<div>{{ hi }}</div>'
})
- 非完整版需要写在render函数里用h创建标签：
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
2. 非完整版事项
- 不完整版vue单文件组件
cd Demo.vue
<template>//视图
</template>
<script>//其他
export default {
data(){
//非完整版中data只能是函数
}，
methods：{
}
}
</script>
<style scoped>//css样式
</style scoped>
//js引入
import Demo from './Demo.vue'
new Vue ({
el:'div id'
render(h){
return h(Demo)
}
})
- SEO(搜索引擎优化)
搜索引擎根据 curl 结果猜测页面
-
title, description(meta 标签), keyword(meta 标签), h1, a
<meta name="description" content="xxx"> <meta name="keyword" content="xxx"> 让 curl 得到页面的信息,SEO 就能正常工作
- 用 codesandbox.io 进行预览: https://codesandbox.io/s/goofy-banzai-vq4jk
3. 总结
image
最佳实践：总是使用非完整版，然后配合vue-loader和vue文件。
思路：
- 保证用户体验，用户下载的js文件更小，但只支持h函数。
- 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数。
- vue-loader把vue文件里的HTML转为h函数。
