Vue两个版本的使用方法

63 阅读1分钟

1. vue的两个版本

两者都可以通过cdn应用,他们的区别在于:

  1. 文件名:
  • 完整版文件名:vue.js
  • 非完整版文件名: vue.runtime.js
  • 生产环境后缀名为:.min.js
  1. 使用方法:
  • 完整版视图写在HTML标签或templa中:
// 需要编译器compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})
  • 非完整版需要写在render函数里用h创建标签:
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

2. 非完整版事项

  1. 不完整版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)
 }
})
  1. SEO(搜索引擎优化)
  • 搜索引擎根据 curl 结果猜测页面

  • title, description(meta 标签), keyword(meta 标签), h1, a

    <meta name="description" content="xxx">
    <meta name="keyword" content="xxx">
    
  • 让 curl 得到页面的信息,SEO 就能正常工作

3. 总结

1676798520302.jpg 最佳实践:总是使用非完整版,然后配合vue-loader和vue文件。

思路

  1. 保证用户体验,用户下载的js文件更小,但只支持h函数
  2. 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
  3. vue-loader把vue文件里的HTML转为h函数