记vue 中踩到的坑

做的一个移动商城，在第一台机器上是好的，在家里的电脑上重新搭建了一个vue-cli，然后写入同样的代码，报错了：

Failed to mount component: template or render function not defined.

这个问题排查了很久，确认了不是代码的问题，百思不得其解只好百度，被坑死了。

原因是：加载的一个loading效果的组件渲染有问题，网上很多解答中找到比较靠谱的解答是vue-loader更新到13之后，对于require和import的区分便严格了。

先贴一段原始代码

const LoadingComponent = require('./Loading.vue');

const loading = {

install: function(Vue) {

Vue.component('loading', LoadingComponent)

}

};

module.exports = loading;

 

一般都在建议把vue-loader改到12之前，但是我觉得知道了问题的原因可以这样改:

import LoadingComponent from './Loading.vue'

const loading = {

install: function(Vue) {

Vue.component('loading', LoadingComponent)

}

};

export default loading

就好了 ~_~

------------------------------------------------------------------------------------------------------

 

export、exports、modules.exports 和 require 、import 的一些组合套路

 

import/export ： 只有es6支持

require ：node/es6 都支持

export和module.exports ：只有node支持

 

node：

export和module.exports 又让我迷惑了@~@ 

node 遵循CommonJS规范 ：模块标识module、模块定义exports 模块引用require

exports只辅助module.exports操作内存中数据，最后被require的内容还是module.exports的。

 

在webpack+babel的支持下，es6是兼容所有语法的，但是在webpack打包时可以在js中混用require和export，但不能混用import和module.exports