[Java Script]Vue.js

Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。

架設環境

安裝Visual Studio Code(https://code.visualstudio.com/)

安裝Node.js(https://nodejs.org/en/download/package-manager)

因為Vue.js的開發者在開發專案時，通常會依賴一些外掛工具套件，所以一般會用Node.js的NPM來實現Vue.js外掛套件的管理。

安裝Vue CLI

npm install -g @vue/cli

建立Vue專案

vue init webpack your_project_name

目錄結構

build：要發佈的專案存放位置。

config：設定路徑、通訊埠等資訊。

node_modules：存放用npm安裝後的套件。

src：項目資料夾

assets：圖檔資料夾。

main.js：專案的核心檔案。

components：自訂義組件放置資料夾。

router：存取路徑與components的路由對應關係。

App.vue：專案入口檔案。

static：靜態資源目錄。

test：初始測試目錄。

index.html：首頁入口。

package.json：專案設定檔。

dist：打包後前端資源的輸出目錄。

進入專案根目錄編譯、執行

cnpm install​

執行Vue.js

npm run dev

安裝ElementUI

cnpm i element-ui -s

引用ElementUI

在main.js加入底下代碼：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

使用ElementUI

Vue.use(ElementUI)

安裝Axios

cnpm install axios -save

Vue.js不支援ajax，因此要借助axios來完成。

引用Axios

import axios from 'axios'