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'