Vue两个版本的区别和使用方法
发布网友
发布时间：2024-10-01 20:33
共1个回答
热心网友
时间：2024-11-21 04:36
完整版 / 非完整版
最佳实践：总是使用非完整版，然后配合vue-loader和vue文件。这样做有以下三点好处：
vue一般使用template来创建HTML，在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。
1.完整版template, 引入vue.js
一般使用template来创建HTML,template是一个替换挂载的元素模板，使用html的方式做渲染。
2.非完整版render, 引入vue.runtime.js
使用vue-cli创建的目录默认会使用这个vue.runtime.js，用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。这种方式不能直接从HTML页面里面获取数据，需要使用 render 函数。
第二种方式更加的灵活独立，因为运行时版本相比完整版体积要小大约40%，这样用户在使用产品时就会效果更好，所以应该尽可能使用这个版本。
但是这种使用 render 函数的方式，虽然是用户体验更好，但是开发者在使用时就会显得很麻烦,因此 webpack 提供了 vue-loader 方法。
当使用 vue-loader 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。
vue-loader 可以把 html模板编译成 render函数的js代码，这样在最后build的时候就会产生一个运行时的版本，从而使体积最小。
只需要单独写成一个.vue文件：
vue-loader 会把这个demo.vue文件变成一个对象，只需要使用render函数渲染这个对象即可：
这种形式也叫vue单文件组件。
因为这种方式是js动态创建的dom，所以这种方式会引起SEO不友好的问题。
所谓的搜索引擎优化就是搜索引擎不停的 curl 一个页面，搜索引擎根据 curl 的内容去分析猜测页面内容。
具体解决SEO不友好的方式可以把title、description、keyword、h1、a 等在html里提前写好，原则就是让curl能得到页面的信息，SEO就能正常工作。
创建步骤：
1.进入沙盒官网 codesandbox.io/，点击右上角按钮Create Sandbox(不用登录)
2.在弹出的页面选择创建Vue沙盒
当页面出现下图所示时即表示创建成功，之后就能随心所欲的写代码啦。
3.如果需要导出文件直接点击下载即可,选择Export to ZIP。
