## Part 1， 问题： webpack + vue2.0框架中，如何在入口js中注册组件？就是在一个月以前，匆匆闯入vuejs这个社群，基本了解了vuejs的一些基础特性和语法。笔者兴致勃勃地开始想用vuejs写个单页面应用出来。兜兜转转地开始使用vue-router这个插件，阅读了vue-router前两个事例之后，发现了一个问题。 通过webpack导入.vue的组件文件的时候，弹出问题：```[vue warn]: Failed to mount component:template or render function not defined.``` 这个只问题出现在vue2.0中，搜索了一下相关资料，网友的解答给了笔者一点启发：[传送门](https://segmentfault.com/q/1010000007071229)>@byronlun的回答:>于是乎，按照官方文档的说法，在webpack配置中加入上面那段代码之后，就不报错了，不过我的页面还是一片空白:< 实在没办法继续Google，然后在Github看到了这个issue里面的LinusBorg的评论，在index.js文件这里,只能使用下列两种情况： 使用template属性例如：```template:'
...
'``` 使用render() function 因此，通过测试，可以直接使用```template:'
...
```来加载对应的内容，组件的话，则需使用render function来注册子组件。 修改之后的index.js文件应该是这样： ``` var Vue = require('vue'); import App from './vue/app'; new Vue({ el: '.show', render: (createElement) => createElement(App) });```>本人愚见（错误请指出）：特别注意一点在入口js文件这里，是无法使用components属性来注册子组件的，而在组件中则可以使用components属性来注册子组件。如果在你的App.vue中，使用components属性来注册子组件的话是可以注册成功的。这是vue2.0才会出现的问题，如果是1.0是不会出现这个问题的。## Part 2，解决的方法网友byronlun的回答，有一定的正确性。在使用webpack构建前端应用时通过``` import [component_name] from "\views\component_name.vue" ```的方法载入的实例无法直接使用全局变量注册组件```Vue.component()```。但是使用webpack构建的语法，import方法导入的实例拥有多个方法，列如在vue webpack工程中修改如下代码：App.vue中``````入口main.js```// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import navbar from '@/components/Navbar.vue'Vue.config.productionTip = false// 以下是注册组件的方法Vue.component('navbar', { render: navbar.render, data: navbar.data})/* eslint-disable no-new */new Vue({ el: '#app', router, template: '', components: { App }})```组件Navbar.vue```export default {
name: 'navbar',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}```## Part 3， 组件加载的原理在查看``` navbar ```实例，我们发现``` render:f() ``` 和 ``` data: f data() ```两个方法。也就是说，webpack的解析会将.vue文件中的模板和数据编译成为render、data和其他方法。通过这两个方法，可以对组件进行初始化。所以在入口js文件注册组件时，我添加了两个初始化方法```Vue.component('navbar', { render: navbar.render, data: navbar.data})```最后的效果如下，## Part 4， 后续研究在网上看到，webpack在解析的时候还可以将.vue文件中的css和js模块载入进来，需要配置sass和lass。这方面的研究还没开始。笔者在这里先留个坑！！！## 后记，新年第一周的技术文档以拖延一天的结果展示出来，有些说不过去，这里反省一下。对于这篇文章，希望对新学习vue的网友有所帮助，当然也希望路过这里的技术高人提供宝贵意见。谢谢大家，祝大家新年快乐！（这个祝福有点晚!!!）
