Vue两个版本的区别

vue/cli创建项目

@vue/cli用法

1. 全局安装：yarn global add @vue/cli
2. 查看安装的版本号： vue --version
3. 创建目录：vue create 要创建的文件名（不支持首字母大写）
4. 选择使用配置
5. 进入目录：cd 文件路径
6. 实现实时预览：运行yarn serve开启webpack-dev-server

codesandbox.io创建Vue项目

我们也可以通过进入codesandbox.io代码沙盒在线创建Vue项目

• 建议不要登录，未登录状态可以一直创建项目。
• 进入网站后点击Create a Sandbox it's free创建项目；选择你要创建的项目类型模板进入编程。
• 在线调试，实时预览项目效果。
• 做完项目的后可以通过file目录找到Export to ZIP压缩包的形式导出该文件。

Vue的两个版本（通过cdnjs.com/引用）

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编译器。
• 完整版的引用:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.runtime.min.js"><script>

用法

非完整版

引入 vue.runtime.js 时，视图写在 render 中

new Vue({ 
  el: "#app", 
  render(h){   //这里的h是craeteElement的缩写
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")]) 
  }, 
  data: {
    n: 0 
  }, 
  methods:{
    add(){ 
      this.n += 1；
    } 
  } 
})

完整版

使用完整版，引入 vue.js 时，视图写在 HTML 里或 js的template 中。

• 写在HTML中： HTML的代码

<div id="app">
{{n}}           //视图没有直接写在js里面，直接写在了页面里
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.runtime.min.js"><script>

main.js的代码:

console.log(window.Vue)
new Vue({ 
   el: '#app', 
   data:{
     n:0
   }
)}

• 写在template中：main.js的代码

new window.Vue({
  el: "#app", 
  template: `
    <div @click="add">{{n}} <button>+1</button></div>`, 
  data: { 
     n: 0 
  }, 
  methods:{
    add(){ 
      this.n += 1
    } 
  } 
})

说明了完整版支持template，template写在html里面或者是js里面都可以。

注意：

• 如果vue.js错用成vue.runtime.js：无法将HTML编译成视图。
• 如果vue.runtime.js错用成vue.js：代码体积变大，因为vue.js有编译HTML的功能。
• 以上两个版本，在生产环境下应使用后缀为.min.js的文件。

min.js是压缩出去空格、回车的文件，主要用于开发用 .js是未经压缩的源码，自带的格式更方便用户查看源码

总结

总是使用非完整版，配合vue-loader和vue文件。

思路：

1. 保证用户体验，用户下载的JS文件体积更小，但只支持h函数
2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
3. 脏活loader做，vue-loader把vue文件里的HTML转化为h函数