1.vue命令行：
- 全局安装：yarn global add @vue/cli
- 创建项目：vue create 路径
- 开启webpack-dev-server:yarn serve
2.创建vue函数：
//vm封装了这个实例对于这个组件的所有操作，包括数据，事件绑定。
const vm=new Vue({
render: h => h(App),
}).$mount('#app')
3.vue的两个版本：
- 完整版（文件名后缀vue.js）：视图不写在js里，长什么样子直接写在页面（html）里，只要你从html变成页面里的东西，完整版就支持。完整版里面含有复杂的编译器（compiler），把html语句变成DOM节点，编译器需要占用大量代码体积。
- 运行时版（文件名后缀vue.runtime.js）：不支持从html获取视图。必须要用createElement方式把所有需要的构造出来。运行时版更加独立,体积小，保证用户体验。
//使用运行时版时，直接render()
new Vue({
el:"#app",
render(createElement){
const h = createElement;
return h("div",[this.n,h("button",{
on:{lick:this.add}},"+1")]);
},
data:{
n:0
},
methods:{
add(){
this.n +=1;
}
}
})
- 运行时版依赖vue-loader:可以依赖webpack前期转换打包的功能（vue-loader）。从而保证开发体验，vue-loader把vue文件里的HTML转为h函数。
4.vue单文件组件(运行时版依赖vue-loader)。
5.SEO友好
- SEO是指搜索引擎优化，
- SEO不友好是指无法知道你curl的内容，当我们使用运行时版时，因为html内容是后面的vue-loader渲染进去的，所以我们在搜索的时候无法搜索到相关内容。
- 解决SEO不友好：把html页面中的title、description、keyword、h1、a写好即可
6.template 和 render;
- VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。
//template
<body>
<divid="app">
<h-titlelevel=1>
<p>li</p>
</h-title>
<h-titlelevel=2>
<p>li</p>
</h-title>
</div>
</body>
</html>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("h-title", {
template: `<div>
<h1 v-if="level==1"><slot></slot></h1>
<h2 v-else-if="level==2"><slot></slot></h2>
</div>`,
props: {
level: {
type: Number,
required: true
}
}
})
letvm=newVue({
el: "#app"
})
</script>
//render
<body>
<divid="app">
<h-titlelevel=1>
<p>Alley</p>
</h-title>
<h-titlelevel=2>
<p>Alley</p>
</h-title>
</div>
</body>
</html>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("h-title", {
render:function(createElement){
returncreateElement(
"h"+this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
})
letvm=newVue({
el: "#app"
})
</script>
7.使用 codesandbox.io 写 Vue 代码：
- 打开codesandbox.io
- 点击Vue的图标，点击Create Sandbox.
- 编辑代码
