vue-cli

快速建立 Vue.js 專案的工具,對於 Node.js 工具熟悉的開發者,推薦使用 vue-cli。

安裝

Node.js

檢查 Node.js 的版本

node -v

更新 Node.js 到最新版本

Windows

如果以上的方法失敗了,就移除 Node.js 並到官網重新下載安裝。

Linux

nvm install v6.11.0

npm

檢查 npm 版本

npm -v

更新 npm 到最新版本

npm update -g npm

安裝 vue-cli

npm install -g vue-cli

利用 vue-cli 建立專案

vue init <template-name> <project-name>

template-name 有 5 種選擇

備註:live-reload 是程式更新時畫面自動重新載入,而 hot reload 是程式更新但不重新載入畫面,好處是資料不用重新輸入。

順著問題一路回答下去,即可完成安裝設定。

利用 vue-cli 建立專案

選擇第一個選項 webpack,建置完畢後,app 的檔案結構如下

vue app 檔案結構

安裝相依與執行

移動到專案中

cd <project-name>

安裝相依套件

npm install

執行

npm run dev

如果不確定要執行什麼指令,可以到package.json看一下。

執行 npm run dev

在瀏覽器網址列打上http://localhost:8008,即可看到歡迎頁面。

Welcome to Your Vue.js App

預設 port 號是 8080,可到config/index.js變更,如上圖改成 3000。

官網文件寫得非常清楚,基本上照著官網一步步做應該沒什麼問題 :)


comments powered by Disqus