本文目录：
cdn加速比打包快吗
cdn加速打包快。在没有使用cdn加速之前打包后数据如下，可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大，假设再来很多依赖项是不是更大，同时也会影响单页面应用首屏加载速度也很慢，所以采用cdn打包优化手段来分离依赖项，加快了打包的速度，而且体积也会相应缩小。
vue怎么兼容华为自带浏览器
我们做vue项目也遇到过这个问题，如果你是wabpack项目打包应该没这问题（我试过了），如果是静态页面CDN引入vue就会有这个问题，原因：部分手机浏览器不支持 ES6（已测试小米和iphone就支持，华为和一加不支持）。
解决方法：页面引入babel-polyfill。
方法一：
script src=""/script
方法二：参考网友王泽平的博客
npm install --save-dev babel-polyfill
引入babel-polyfill的方法有三种：
import "babel-polyfill";
require("babel-polyfill");
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
Vue - 组件和Vue.extend
在初学 Vue 的时候,都是利用 cdn 的方式在一个页面中导入 vue.js 的库文件.
接着,肯定就学到了组件开发.
当然,也是在单页面中.
API文档告诉我们
在后来,学到了使用 vue-cli 搭配 .vue 模板的方式开发组件.
好了,三种组件创建的方式说完了,且在各自的环境里都能够正常的运作.
在 Vue 开发中,所有的组件本质上都是由一个继承自 Vue 的构造函数创建的.
比如在注册局部组件时.
从视觉上,我们看到 TodoListComp 只是一个普通的 Object 对象.
直接赋值给了其他组件的 components 属性里.
然后,这个组件就成为了一个局部组件,并可以在注册了当前组件的内部去使用了.
那它在内部做了什么,导致这个普通的对象最后可以被当成是一个正常的组件来使用呢?
比如,普通对象上都没有 $el 之类的属性.丢给 components 之后,就啥都有了.
使用Vue.extend(options)会根据传入的options创建一个VueComponent的组件构造函数并返回.
既然使用 Vue.extend 会返回一个组件的构造函数.
那么我们就可以使用 new 这个返回的构造函数
并手动的 mount 并替换某个 dom 节点(就和 new App() 一样)
前面,我么已经知道了,所有的 vue 组件,不管是全局的还是局部的.
都是利用 Vue.extend 方法构建并返回出一个继承自 Vue 的组件构造函数.
这个函数接受一个满足了 Vue 组件属性项的普通的 Object 对象.
在.vue模板文件开发中,也不例外.
我们可以看看,在书写 .vue 模板文件时,我们到底在写什么?
我们写的是一个 .vue 文件.
并按照 template/template script/script ( 这里不关注 style/style 节点 ) 的格式编写 .vue 文件.
把它整合起来来看.
等价于
好了,继续回到 .vue 模板开发文件中.
在另外一个组件中,使用此组件时,我们会 import xxx from xxx.vue 并搭配 components:{ xxxx }
.vue 会被 webpack 中配置的 vue-loader 处理.这是我们已知的.
结合上述的判断, vue-loader 仅仅只是把 .vue 文件编译成了一个 vue.extend(options) 创建组件所需要的 options 普通对象而已.
既然 vue-loader 仅仅,只是把 .vue 模板文件编译成了一个 options 普通对象.
那么我们可以手动的使用 Vue.extends(options) 来获得这个组件对象的构造函数.
拿到此组件的构造函数,我们就可以在 组件 mounted 的时候,通过 new 的方式,挂在到 html 上了. (而无需去注册到 components,成为一个局部组件.直接把它当成一个自己熟悉的不能在熟悉的构造函数调用即可.)
既然我们已经知道:
我们完全可以直接使用 .js 文件的方式来创建 vue 组件,进而省略 .vue vue-loader 这个执行的步骤.
此 .js 文件到处一个 vue 组件的构造函数.
在另外一个组件里
通过这样的原理,我们完全可以在HTML页面的任意地方,任意位置,任意的挂在我们自己的组件.并不一定必须使用.vue声明式组件的语法.
[ 码云地址 ]
【cdnvue】内容来源于网络，若引用不当、侵权，请联系我们修正或者删除！
评论已关闭