怎么产生vue文件_VUE 初识

1. 两个版本对应的文件名
2. template 和 render 怎么用
3. 如何用 http://codesandbox.io 写 Vue 代码

两个版本对应的文件名

1. vue.js(完整版)：有compiler（编译器，占体积较大，40%左右）；视图写在html里或者写在template选项；cdn引入vue.js；webpack引入需要配置alias；@vue/li引入需要额外配置；
2. vue.runtime.js(运行时版)：没有conpiler；视图写在render函数里，用h来创建标签（h是写好的函数）；cdn引入vue.runtime.js；webpack与@vue/li 引入默认使用非完整版

建议使用非完整版，配合Vue-loader使用。好处是：

• 利于用户体验，用户下载的js文件小，但只支持h函数
• 利于开发体验，在vue文件里写html标签，不写h函数
• 麻烦事让loader做，vue-loader把vue文件里的html转化为h函数

template 和 render 怎么用

• template：<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
• 非完整版中render：render(h){
return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])
} //h相当于 creatElement,用h去创建实例

如何用 http://codesandbox.io 写 Vue 代码

https://codesandbox.io/​codesandbox.io

打开codesanbox网站，建议不要登录，create然后选择vue。

今天就到这啦，掰掰。