html 引用vue_前端日记-Vue 两个版本的区别和使用方法

搭建项目

可以在命令行使用@vue/cli进行项目搭建，具体的内容在vue的官方文档都可以查到

这里也给新手介绍另一种方式：通过http://codesandbox.io搭建项目

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

注意：不要登录，不登录可以创建无数个项目，登陆了就只能创建50

步骤：

Sandbox--->创建vue--->导出zip

不要登录，直接创建Sandbox

选择创建vue

导出

直接下载下来就可以用了

vue.js 和 vue.runtime.js

如何使用vue实例

1.从HTML中得到视图

• 也就是官方文档里说的 完整版Vue
• 
从CDN引用vue.is或vue.min.is即可做到
• 也可以通过import引用Vue.js或者vue.min.js

2.用JS构建视图

• 还是看官方的文档链接，引用vue.runtime.js
• 这种方法很不方便，但实际上是对的
• vue.js 与 vue.runtime.js区别在于:完整版的vue（vue.js）需要complier编译器把html的内容变成DOM节点，增加了代码体积，大概比不完整版多占了40%的代码体积

3.使用vue-loader

• 利用webpack，可以吧.vue文件翻译成h构建函数
• 这样我们在写代码的时候好像在用完整版，但是用户下载的就是h()+'不完整版的vue',减少代码体积
• template 和 render：render会把<template><div></div></template>自动翻译成h('div')

两种版本区别

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