Webpack+vue2.0如何注册全局组件 (01)

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中，搜索了一下相关资料，网友的解答给了笔者一点启发：传送门

@byronlun的回答:

于是乎，按照官方文档的说法，在webpack配置中加入上面那段代码之后，就不报错了，不过我的页面还是一片空白:<

实在没办法继续Google，然后在Github看到了这个issue里面的LinusBorg的评论，在index.js文件这里,只能使用下列两种情况：

使用template属性例如：template:'<div><modal> ... </modal></div>'

使用render() function

因此，通过测试，可以直接使用template:'<div><modal> ... </modal></div>来加载对应的内容，组件的话，则需使用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中

<template>
  <div id="app">
    <router-link to="/"><img src="./assets/logo.png"></router-link>
    <navbar></navbar> <!-- 添加自定义组件-->
    <nav>
      <router-link to="/user/peng/profile">Go to user profile</router-link>
      <router-link to="/user/hu/posts">Go to user posts</router-link>
    </nav>
    <router-view/>
  </div>
</template>

入口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: '<App/>',
  components: { App }
})

组件Navbar.vue

<template>
  <div class="test">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'navbar',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

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的网友有所帮助，当然也希望路过这里的技术高人提供宝贵意见。

谢谢大家，祝大家新年快乐！（这个祝福有点晚!!!）