由零建立Vue.js WebApp及專案結構解釋 | vue native教學
Vue.js是一個負責Viewlayer的javascriptframework,可以用來renderhtml的內容。Vue可以加入到現有網頁,但更多情況是用Vue由頭建立一個SPA(Single-pageapplication)[1]。這裡紀錄了如何建立一個用上node.js,npm,webpack,vue-router,vuex的Vue.js專案。I.安裝Vue以下參照了官方文檔[2]所寫的步驟:#安裝vue-cli$npminstall--globalvue-cli#用"webpack"template開一個新project$vueinitwebpackmy-project然後vue-cli會問一些問題去幫你決定如何初始化你的專案,vue-router最好選安裝,用來做網頁的routing。#安裝dependencies$cdmy-proj...
Vue.js是一個負責View layer的javascript framework,可以用來render html的內容。Vue可以加入到現有網頁,但更多情況是用Vue由頭建立一個SPA(Single-page application)[1]。
這裡紀錄了如何建立一個用上 node.js, npm, webpack, vue-router, vuex 的Vue.js專案。
I. 安裝 Vue以下參照了官方文檔[2]所寫的步驟:
# 安裝 vue-cli $ npm install --global vue-cli # 用 "webpack" template 開一個新project $ vue init webpack my-project然後vue-cli會問一些問題去幫你決定如何初始化你的專案,vue-router最好選安裝,用來做網頁的routing。
# 安裝 dependencies $ cd my-project $ npm install # 試行 $ npm run dev Project Structure現在你的Project大概長這樣:
. ├── build/ # 放專案管理工具 ├── config/ # 放config檔 ├── dist/ # 經compile後的完整網頁,由npm run build建立 ├── index.html # 整個project的根檔案 ├── node_modules/ # npm modules ├── package.json # npm dependencies ├── src/ # 你的code ├── static/ # 放static files如圖片等 └── test/ # UI tests 運作流程趕時間的朋友可跳過這part到Part II[3]
理解這個初始project如何運作,對日後擴展你的application有很大幫助。
Dev server執行npm run dev,會調用build/dev-server.js,裡面會使用webpack去打包project。
Webpack c...