区别

  • Vue.js是Vue完整版，Vue.runtime.js是非完整版
  • Vue完整版有compiler, 非完整版没有compiler，非完整版相比完整版体积要小大约 30%
  • Vue完整版视图写在HTML里或者写在template选项，非完整版写在render函数里，用h来创建标签
  • cdn引入时文件名不同
  • webpack引入时，完整版需配置alias, 默认为非完整版
  • @vue/cli引入完整版需额外配置，默认为非完整版
  • 推荐总是使用非完整版，配合vue-loader和vue文件


Vue单文件组件

新建一个demo.vue文件,里面包含template, script, style三部分

  1. <template>
  2.     <div class="red">
  3.         {{n}}
  4.         <button @click="add">+1</button>
  5.     </div>
  6. </template>
  8. <script>
  9. export default {
  10.     data(){
  11.         return {
  12.             n: 0
  13.         }
  14.     },
  15.     methods: {
  16.         add(){
  17.             this.n += 1
  18.         }
  19.     }
  20. }
  21. </script>
  23. <style scoped>
  24. .red {
  25.     color: red;
  26. }
  27. </style>

在main.js里引入demo.vue文件，并新建Vue实例

  1. import Vue from 'vue'
  2. import demo from './demo.vue'
  4. new Vue({
  5.   el: '#app',
  6.   render: h => h(demo)
  7. })