最近開始研究web前端vue框架，嘗試將資料結合具體操作進行整理，以此加深印象。

1. vue專案構建過程

• 筆者使用JetBrain公司產品webstorm新建vue專案
• 第一步：官網下載安裝webstorm
  
• 第二步：在左側導航欄中選擇Vue.js，此時右側需進行配置：
  • 修改檔名（初始為untitled）
  • 配置node.js
    • 簡介：node是js的服務執行環境，前端常常藉助 node幫助前端實現工程化。很多工具是基於node的，比如即將使用的打包工具webpack
    • 若系統中並無node.js，需官網下載安裝並配置環境變數
  • 配置vue-cli
    • 簡介：vue-cli是vue腳手架，用於快速構建vue工程
    • 上一步中node環境配置完成後，可直接使用控制檯，輸入$ npm install -g vue-cli下載安裝vue-cli
  • 介面右側中前三項配置完成後，第四項預設為webpack，無需修改
    
• 第三步： 進入下一步後填寫工程名、描述、使用者等約十步。
  • 可連續點選下一步使用預設配置，直至構建完成
  • 構建完成後出現工程介面，點選左下角npm -> 雙擊dev 即可啟動專案
  • 在瀏覽器中輸入http://localhost:8080，或直接點選控制檯中的url即可訪問示例頁面，如下：
    

至此，vue示例專案啟動成功

2. vue專案新建頁面

• 示例專案啟動成功後，若新增頁面，需新增.vue檔案並配置路由
  • 第一步：新增.vue檔案
    筆者在components目錄下新增First.vue檔案，內容如下
    
    First.vue中程式碼如下：

    	<template>
    	  <div><h1>{{message}}</h1></div>
    	</template>
    	
    	<script>
    	export default {
    	  name: 'First.vue'
     
    ,
    	  data () {
    	    return {
    	      message: 'welcome'
    	    }
    	  }
    	}
    	</script>
    	
    	<style scoped>
    	
    	</style>
    

  • 第二步：配置路由
    
  1. 匯入元件即First，對應下方component值
  2. 插入如下語句，防止訪問頁面時url出現的#/符號
     • 如果不想要很醜的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面。
     • vue-router 預設 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入。
     • 當你使用 history 模式時，URL 就像正常的 url

     	const router = new VueRouter({
     		mode: 'history',
     		routes: [...]
     	})
     

  3. 插入url地址與元件地址對映語句

     	{
     		path: '/first',
     		name: 'First',
     		component: First
     	}
     

  • 第三步：開啟瀏覽器，輸入http://localhost:8080/first
    

至此，頁面新建成功

3. 分析呼叫關係

• 上一節頁面新建時，介面中有個意外的圖示，引發思考
  
  • 既然First.vue程式碼中只編寫了 "welcome"相關程式碼，那麼圖示從何而來呢？
  • 解決這個問題，需要分析vue檔案中的呼叫關係
    
• 使用到vue專案的檔案包括一個.html，兩個.js，兩個.vue檔案，關係如上圖所示
• 由圖可見，檔案關鍵處在於main.js，管理著所有需要的資源，其中new Vue的引數，解釋如下：
  • el：官方解釋為例項提供掛載的元素。此處為index.html中的<div id="app"><div>。
  • router：為router:router,的簡寫，指向引入檔案中的routes:[]
  • components：註冊哪些元件，需在頂部引入檔案。
  • template：替換掛載元素的模板元件，而掛載元素的內容都將被忽略。即用template替換index.html裡面的<div id="app"></div>

此時，可知main.js檔案呼叫關係分為三步，如圖中序號

1. 確定將被掛載（替換）的元素，此處為index.html中的<div id="app"><div>。
2. 註冊元件（此處只有元件App），選擇其中用於替換掛載元素（第一步中的元素）的模板元件（<App/>），即用App.vue替換index.html中的<div id="app"><div>。
3. 注入路由器router：
   1. 模板元件（App.vue）中有<router-view/>，將在其中渲染路由匹配到的元件
   2. 注入（import）路由時指定的是router資料夾，即資料夾下所有routes
   3. router資料夾下此時只有index.js檔案，其中routes:[]規定了檔案地址及其url地址對映
   4. 根據檔案地址，載入元件（First.vue），元件被渲染在<router-view/>中，顯示在index.html中

然而追本溯源，呼叫關係中仍有兩個問題：

1. index.html為何預設顯示？
   其實，雙擊執行npm中dev時，控制檯將執行如下語句：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

由此可見，執行時啟動檔案webpack.dev.conf.js，而檔案中包含如下語句，規定了起始頁面：

	new HtmlWebpackPlugin({
	      filename: 'index.html',
	      template: 'index.html',
	      inject: true
	    }),

2. main.js為何預設載入？
   因為使用的腳手架工具vue-cli裡用webpack來打包專案檔案，webpack.dev.conf檔案裡還定義了webpack基礎配置檔案webpack.base.conf.js，定義語句如下：
   const baseWebpackConfig = require('./webpack.base.conf')
   而檔案webpack.base.conf.js中，包含如下語句，指定了入口：

 entry: {
    app: './src/main.js'
  }

至此，檔案呼叫關係簡述完畢