脚本宝典收集整理的这篇文章主要介绍了Vuejs 的 dist 文件使用指南,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
项目里几个 Vuejs 版本都遇到过 vue.runtime.COMmon.js 的报错提示:
vue 2.0.7
vue.runtime.common.js:519 [Vue warn]: Failed to mount component: template or render function not defined.
vue 2.1.0
vue.runtime.common.js:511 [Vue warn]: Failed to mount component: template or render function not defined.
vue 2.2.6
vue.runtime.common.js:556 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. EITher PRe-compile the templates into render functions, or use the compiler-included build.
查了 Vuejs 的 Release LOG 和 Readme 等,找出原因是 Vuejs 区分 Full 与 Runtime-only 版本。平时的 Vue Single File Component (即 .vue
后缀文件)不需要 Full 版本,直接 import Vue From 'vue'
即可。
而如果用到 Vue.extend({})
手动构造 Vue 组件的, import Vue from 'vue'
会报上面的错误。要换成 vue/dist/vue.js 或 vue/dist.common.js 或 vue/dist/vue.ESM.js (更多可看 : Vue Github/Explanation of Build Files )。
我的各项目的 Vue 版本因为某些原因暂时没对齐,所以要把各版本的整理下。
这里使用 Webpack 配置 Vuejs 的 alias 为例,整理为 3 个版本的配置。使用时 import vue from 'fullVue'
加载 Full 版本。
module.exports = {
// ...
resolve: {
alias: {
'fullVue': 'vue/dist/vue.esm.js' // vue 2.2.0 及以后并使用 webpack 2.0
}
}
}
module.exports = {
// ...
resolve: {
alias: {
'fullVue': 'vue/dist/vue.common.js' // vue 2.1.0 及以后,vue 2.2.0 以前, 或者 vue 2.2.0 以后但使用 webpack 1.0
}
}
}
module.exports = {
// ...
resolve: {
alias: {
'fullVue': 'vue/dist/vue.js' // vue 2.1.0 以前
}
}
}
Vuejs 是个很潮的框架,各种新东西都被作者引入进来。比如 2.2.0 的 Release log 介绍:
The default export used by Webpack 2 will now point to an ES module build (dist/vue.runtime.esm.js). This means without any alias configuration, require('vue') in webpack 2 will give you an object ({ __esModule: true, default: Vue }) instead. You should only use import Vue from 'vue' with webpack 2.
还有 vue-loader 前所未有的 style 块新语法,让 Vue Single File Component 支持覆盖子组件样式问题:
.foo >>> .bar { color: red; }
vue-loader 最近的 release 表示可以用 /deep/
代替 >>>
<style scoPEd> now support "deep" selectors that can affect child components using the >>> combinator:
用这么潮的框架,就是累人啊啊啊啊。
以上是脚本宝典为你收集整理的Vuejs 的 dist 文件使用指南全部内容,希望文章能够帮你解决Vuejs 的 dist 文件使用指南所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。