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的網友有所幫助，當然也希望路過這里的技術高人提供寶貴意見。
謝謝大家，祝大家新年快樂！（這個祝福有點晚!!!）