Vue-初体验/两个版本的区别5.我们也通过codesandbox.io新建一个vue项目在线创建vue项目，在线调试；

@vue/cli用法,官方文档

1.安装@vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli   //推荐

2.创建vue文件

vue create vue-demo

3.选择使用配置(学习时)

4.进入目录，运行yarn serve开启webpack-dev-server（npm run serve）

5.我们也通过codesandbox.io新建一个vue项目在线创建vue项目，在线调试；或者也可以通过下载zip。

Vue的两个版本(来自bootcdn)：

运行时版本vue.runtime.js

不支持从html获取视图。
不支持template，需通过webpack的工具vue-loader 将组件，预编译template模板编译为render函数。
没有complier编译器，因此代码体积会比完整版小40%。‘html’ 转化成节点。

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.runtime.min.js"></script>

完整版vue.js

支持从html获取视图。
支持template。
有complier编译器，而complier可以将字符串

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

初体验

// Demo.vue中,template中是完整版vue的写法

 //不完整版：不需要编译器
   new Vue({
    render(h){ return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])}
    })

<template>
    //完整版：需要编译器
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>

</template>

<script>
export default {
  data() {
    return {
      n: 210
    };
  },
  methods: {
    add() {
      this.n += 2;
    }
  }
};
</script>

<style scoped>
.red {
  color: #f00;
}
</style>

main.js中渲染Demo

import Demo from './Demo.vue'
console.log(Demo.render.toString())
new Vue({
  el: '#app',
  render(h) {
    //h就是createElement的缩写
    return h(Demo)
  }
})

挂载到index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue-1</title>
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.runtime.min.js"></script>
</body>
</html>

yarn build 当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用runtime版本即可。因为rumtime版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。

深入理解两个版本的区别

	Vue完整版	Vue非完整版	评价
特点	有compiler	无compiler	complier占40%体积
视图	写在HTML里或者写在template选项	写在render函数里用h来创建标签	h是尤雨溪写好传给render的
cdn引入	vue.js	vue.runtime.js	文件名不同，生成环境后缀为.min.js
webpack引入	需要配置alias	默认使用次版本	尤雨溪配置的
@vue/cli引入需要额外配置	默认使用次版本	尤雨溪，蒋豪群配置的

最佳实践：总是使用非完整版，然后配合vue-loader和vue文件

思路：

保证用户体验，下载的js文件体积小，但只支持h函数
保证开发体验，开发可直接在vue文件里写html标签，而不写h函数
其他脏累活儿交给loader做，vue-loader把vue文件里的html转为h函数