Vue SPA 應用的 js 入口文件

註冊組件

1 調用 Vue.extend() 方法創建組件構造器

	var MyComponent = Vue.extend({
		template: '<div>組件內代碼</div>',
	});

2 調用 Vue.component() 方法註冊組件

	Vue.component('my-component', MyComponent);

可以將1和2合併:

	Vue.component('my-component', {
		template:'<div>組件內代碼</div>'
	})

實際操作中, 合併的寫法更多. 全局註冊組件, 還可以聲明一個常量接受該全局組件, 方便直接其他插件調用組件:

	// 聲明 一個 List 常量接受註冊好的視圖組件
	const List = Vue.component('list', require('./views/list.vue'));

使用 VueRouter 插件

1. 引入 VueRouter 並使用插件

	import VueRouter from 'vue-router';
	Vue.use(VueRouter);

2. 引入定義好的 route.js

	// route.js 路徑自定義
	import Route from './route';

3. 配置 Route

	const RouteConfig = {
		mode: history,
		route: Route,
	}

4. 實例化 VueRouter

	const router = new VueRouter(RouterConfig);

有將 2.3.4 放到一起的寫法( 實際工作中, 往往 routes 很複雜, 還是分開來寫).

	const router = new VueRouter({
		mode: history,
		routes: [
			{
				// 當路由不存在時候, 跳轉到 index
				path: '*',
				redirect: '/index',
			},
			{
				name: 'List',
				path: '/list',
				meta: 	{
					title: '頁面標題',
				},
				/** component 的三種寫法: 
				 * 1. 這種寫法, webpack 會把每一個路由都打包爲一個 js 文件, 
				 * 當請求到該頁面時, 纔去加載這個頁面的 js, 也就是異步實現的懶加載(按需加載). 
				 */
				component: (resolve) => require(['./views/list.vue'], resolve),
			},
		],
			
	});

			// 2. 如果非要一次性加載, 可以這樣寫:
			component: require('./views/list.vue'), 

			// 3. 還可以事先註冊該視圖組件, 聲明一個常量 List 來接受該已經註冊過的組件, 可以使路由簡化
			component: List,

使用 Vuex 插件

在實際的業務中, 經常有跨組件共享數據的需求, 因此 Vuex 的設計就是用來同意管理組件狀態的, 它定義了一系列規範來使用和操作數據, 使組件應用更加高效.

引入 Vuex 並使用插件, 用法和 VueRouter 類似, 他們都是 Vue 的插件.

	import Vuex from 'vuex';
	Vue.use(Vuex);

創建 Vuex 實例

	const store = new Vuex.Store({
		// Vuex 的配置
	});

引入 視圖組件的入口文件 App.vue

App 組件是其他組件的入口

	import App from './views/App';

實例化 Vue

掛載 router, store, App 根組件 到 Vue

	var vm = new Vue({
	    el: '#app',
	    router: router,
	    /** 倉庫 store 包含應用的數據(狀態)和操作過程. 
	     * Vuex 裏的數據都是響應式的, 任何組件使用同一 store 的數據時, 
	     * 只要 store 的數據變化, 對應的組件也會立即更新.
	     */
	    store: store,
	    render: h => h(App),
	});

或者:

	var vm = new Vue({
	    router,
	    store,
	    // Vue1.0 的寫法
	    // components: { App }, 
	    // Vue2.0 的寫法
	    render: h => h(App),
	}).$mount('#app');

掛載 App 根組件寫法:

		// Vue1.0 寫法
		components: { App },
		// Vue2.0 es 6 的語法
		render: h => h(App),

關於 render 函數:

1. 首先需要了解這是 es 6 的語法，表示 Vue 實例選項對象的 render 方法作爲一個函數，接受傳入的參數 h 函數，返回 h(App) 的函數調用結果。

2. 其次，Vue 在創建 Vue 實例時，通過調用 render 方法來渲染實例的 DOM 樹。

3. 最後，Vue 在調用 render 方法時，會傳入一個 createElement 函數作爲參數，也就是這裏的 h 的實參是 createElement 函數，然後 createElement 會以 APP 爲參數進行調用，關於 createElement 函數的參數說明參見：Element-Arguments

結合一下官方文檔的代碼便可以很清晰的瞭解 Vue2.0 render:h => h(App) 的渲染過程。

[官方文檔][1]：

	render: function (createElement) {
		return createElement(
	    	'h' + this.level,   // tag name 標籤名稱
	 		this.$slots.default // 子組件中的陣列
		)
	 }

爲了方便仍然有疑惑的人，貼一個鏈接,

render: h => h(App) 是下面內容的縮寫：

	render: function (createElement) {
		return createElement(App);
	}

進一步縮寫爲(ES6 語法)：

	render (createElement) {
		return createElement(App);
	}

再進一步縮寫爲：

	render (h){
		return h(App);
	}

按照 ES6 箭頭函數的寫法，就得到了：

	render: h => h(App),

其中 根據 Vue.js 作者 Even You 的回覆，h 的含義如下：

It comes from the term “hyperscript”, which is commonly used in many virtual-dom implementations. “Hyperscript” itself stands for “script that generates HTML structures” because HTML is the acronym for “hyper-text markup language”.

它來自單詞 hyperscript，這個單詞通常用在 virtual-dom 的實現中。Hyperscript 本身是指生成HTML 結構的 script 腳本，因爲 HTML 是 hyper-text markup language 的縮寫（超文本標記語言）

個人理解：createElement 函數是用來生成 HTML DOM 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript，這樣作者才把 createElement 簡寫成 h。