測試平臺之 vue+ElementUI 編寫導航和路由

#首先看下效果圖和功能，這篇帖子主要講了elementUI的框架搭建，路由和導航選單比較細節。需要原始碼和講解的可以私聊我，免費！
微信;liuxiaolu4986,我的測試平臺就是用的這個技術棧寫的，對於不懂前端的人來講簡直太棒了，很多東西可以拿來直接用，大大節省了
開發時間和學習時間，話不多說看效果圖

#安裝Node

• 開發框架和環境都是需要 Node.js ，所以需要先安裝 node.js 環境， *vue的執行是要依賴於 node 的 npm 管理工具來實現，Node官網下載地址： http://nodejs.cn/download/。 *安裝過程一路Next就可以，安裝完成之後，便可以開啟 cmd 開始輸入命令。 *可以輸入 node -v ，回車以檢視node版本號，出現版本號則說明安裝成功。 我的node v10.15.1

#替換 npm 地址

• 由於 npm 是國外的，使用起來速度可能會比較慢。所以我們使用淘寶的 cnpm 映象。淘寶的 cnpm 命令管理工具可以代替預設的 npm 管理工具。 在 cmd 中輸入命令即可。這一步可以跳過。 npm i -g cnpm --registry=https://registry.npm.taobao.org

#全域性安裝 vue-cli 映象

• 在 cmd 輸入命令安裝 vue-cli。 cnpm i -g vue-cli 安裝完成後，在命令中輸入vue，會輸出vue的資訊，則說明安裝成功。

#使用 vue-cli 初始化 vue 專案

• 首先使用 cmd 進入到你希望建立專案的目錄，如果想要切換碟符，例如切換到 D盤 使用命令：
  D:
  然後使用 cd 路徑命令即可進入到資料夾，例如：
  cd D:\MyProject
  建立專案，使用命令：
  vue init webpack YourProjectName

• 然後會需要你輸入一些專案的基本資訊。

• Project name :專案名稱 ，如果不需要更改直接回車就可以了。注意：這裡不能使用大寫。
  Project description:專案描述，預設為A Vue.js project。直接回車，不用編寫。
  Author：作者，如果你有配置git，他會讀取.ssh檔案中的user。
  Install vue-router? 是否安裝vue的路由外掛。Y代表安裝，N無需安裝，下面的命令也是一樣的。
  Use ESLint to lint your code? 是否用ESLint來限制你的程式碼錯誤和風格。建議N。
  setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha。
  Setup e2e tests with Nightwatch?是否安裝e2e來進行使用者行為模擬測試。
  Should we run npm install for you after the project has been created?(recommended) 選擇npm。

建立完成之後，cmd 中會提示如下命令：

• cd YourPrpojectName npm run dev 則表示建立成功。 此時可以輸入這兩行命令，來執行你的專案。 cmd 將會輸出你的專案執行埠，一般預設是 http://localhost:8080/。 開啟瀏覽器輸入地址即可看到 vue 的 hello world 介面。 如果想結束程式，可以在啟動的 cmd 中按下 ctrl+c 然後輸入Y，即可結束。 npm run build #目錄結構 build 專案構建(webpack)相關程式碼 config/dev.env.js 配置開發環境的一些基本資訊 node_modules npm 載入的專案依賴模組 src 這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案： components: 放的是我們專案中要使用的小元件 router/index.js 此資料夾放一些我們專案中路由檔案 App.vue: 是我們專案最原始的根元件 main.js: 專案的核心檔案。 static 靜態資源目錄，如圖片、字型等。 test 初始測試目錄，可刪除 index.html 首頁入口檔案，你可以新增一些 meta 資訊或統計程式碼啥的。 package.json 依賴包：第三方依賴 package-lock.json 幫我們確定我們安裝第三方具體的哪些版本 README.md 專案的說明文件，markdown 格式

#安裝 Element-ui
https://element.eleme.cn/#/zh-CN 官網

• 使用命令 npm i element-ui -S cmd 顯示安裝成功之後。

在 main.js 引入 element-ui 的 js 和 css

1 import ElementUI from 'element-ui'
2 import 'element-ui/lib/theme-chalk/index.css'
3 Vue.use(ElementUI)

確認無誤後再次使用命令
npm run dev
執行，即可看到頁面上多出了 element-ui 的選單元件。
至此，開發環境已經可以執行。

#vue基本語法 https://www.runoob.com/vue2/vue-if.html

1、文字
資料繫結最常見的形式就是使用 {{...}}（雙大括號）的文字插值：
2、 v-model 指令來實現雙向資料繫結
3、v-if 條件判斷

#es6基本語法 https://es6.ruanyifeng.com/
1、let
2、const宣告一個只讀的常量。一旦宣告，常量的值就不能改變。