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的网友有所帮助，固然也但愿路过这里的技术高人提供宝贵意见。 谢谢你们，祝你们新年快乐！（这个祝福有点晚!!!）