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的網友有所幫助，固然也但願路過這裏的技術高人提供寶貴意見。 謝謝你們，祝你們新年快樂！（這個祝福有點晚!!!）