1.安装@vue/cli

cli.vuejs.org/zh/ 查看文档

2.vue的两个版本的比较

vue.js和vue.runtime.js

非完整版没有编译器,无法实时转换html,只支持h函数,但体积较小,为保证用户体验一般默认使用非完整版 最佳实践:总是使用非完整版,然后配合vue-loader和vue文件

3.templete和render的使用

当我们创建一个Vue实例对象时，我们可以传入一个template参数，该参数将会插入到Vue所对应的html元素中，实例代码：

<script scr="xxxx/vue.js"></script>
new Vue({
  el:"xxx",
  template:`<div>{{n}}<button @click="add"> +1</button></div>`,
  data:{
    n:0
      },
  methods:{
    add(){
      this.n+=1
        }
          }
        })
复制代码

或者我们使用runtime版本，用render参数实现上述功能，实例代码：

<script scr="xxxx/vue.runtime.js"></script>
new Vue({
  el:"xxx",
  data:{
    n:0
      },
  methods:{
    add(){
      this.n+=1
        }
        },
    render(h){
        return h("div",[this.n,h("button",{on:{click:this.add}},"+1")])
}
})

其他:

我们可以使用Codesandbox来创建在线的vue实例，点击CreatSandbox选择vue即可创建在线实例,点击export可以导出