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. 總結
vue兩個版本的區別
最佳實踐：總是使用非完整版，然后配合vue-loader和vue文件。
思路：
- 保證用戶體驗，用戶下載的js文件更小，但只支持h函數。
- 保證開發體驗，開發者可直接在vue文件里寫HTML標簽，而不寫h函數。
- vue-loader把vue文件里的HTML轉為h函數。
