Vue Cli 3 基本操作
安裝 Vue Cli
- 必須先安裝好 node.js (輸入
node -v
可查看 node 的版本。建議安裝 9 版以上,運行才會正常。) - 在終端機上輸入
npm install -g @vue/cli
(-g
安裝全域的環境) - 安裝完後,輸入
vue
會顯示少了一些指令,可再進行安裝 - 輸入
vue -V
可查看 vue cli 的版本。
運行 Vue Cli 的方法
方法有兩種:
- 在終端機上輸入指令
vue create my-project
- 使用 ui 的方式運行,在終端機上輸入
vue ui
,就會跳出具有 ui 版本的 vue cli 網頁頁面(執行時,終端機不可關閉,會導致連線失敗)
建立 Vue Cli
- 新增專案。輸入資料夾名稱,下方初始化 Git 開啟。
2. 選擇手動設定
3. 將 Babel Router、CSS Pre-processors、Linter / Formatter 開啟
Babel:確保 ES6 的語法在所有瀏覽器都可以正確的運行。
Router:路由
CSS Pre-processors:CSS的預處理器
Linter / Formatter:檢查程式碼有沒有排整齊
4. CSS 預處理器選擇 node-sass。ESLint Airbnb 版是最嚴格的。
5. 按下新增專案後,終端機便開始建立環境,會需要跑一下。
執行 Vue Cli
- 按下執行後便會開始編譯開發環境
2. 按下啟動 app 就會把環境給運行起來
3. 回到剛才建立的專案資料夾,使用 vscode 開啟
node_moduless:剛才安裝好的套件,包含編譯 sass 和編譯 vue 檔案的功能。
public:這個資料夾內的東西都不會被編譯,適合放圖檔(jpg, png)。
根目錄下的檔案,就是運行的環境。
package.json:安裝套件所紀錄的檔案(安裝的套件都會寫在這裡)
src 資夾內有 main.js,主要的 js,所有的外部套件及檔案都會跟它產生關聯,如下圖所示
views 資料夾內的 .vue 檔都是完整的頁面檔案(主要頁面)。
components 資料夾內的 .vue 檔,皆為小元件,如分頁元件、Modal元件等。
assets資料夾內放自定義的 JS、CSS..檔
編譯 Vue Cli
按下 build 便會開始編譯,並輸出一個資料夾 dist。裡面的 index.html 即是編譯及壓縮後的檔案,無法被直接運行,必須使用 webServer 才能被運行起來。此資料夾檔案即是一個完整的專案資料夾,可直接丟掉後端伺服器做運行,但是沒辦法以資料夾的形式來運行。
在 Vue Cli 上安裝套件
插件
基於 vue cli 環境進行擴充,如 vuex、樣板語言 pug 等等,就可以在這裡做選擇。
依賴
分為「執行依賴」及「開發依賴」。「開發依賴」是基於 webpack 或 node 的環境下進行擴充。「執行依賴」會比較常使用,例如 bootstrap、vue,前端環境會執行的程式碼或套件都是使用「執行依賴」。
點擊「安裝依賴」後,輸入要安裝的套件名稱,以下示範安裝 vue-loading-overlay
(安裝文件),點選後便可進行安裝,安裝套件會花上一些時間。
安裝完後回到選單「任務」→「serve」,按下執行後就可以直接運行它。
執行完後回到選單「依賴」,即可看見剛才安裝好的套件。
在 package.json 上也可以看到剛才安裝好的套件。
把套件 import 加載到 main.js 裡,加載完之後要使用此套件時,必須載入元件,使用「全域註冊」 Vue.component()
的方式載入元件,使用此方式在任何頁面上都可以使用這個元件。
在 App.vue 上,放上 loading 效果的程式碼,並設定 loading 效果呈現的時間,使用 isLoading: false/true 的方式,來判斷是否要顯示 loading 效果。
在 Vue Cli 上使用 AJAX
安裝 vue-axios(vue-axios文件)
npm install --save axios vue-axios
這裡會安裝兩個套件,一個是 axios,另一個是 vue-axios。以下是示範用 vue ui 安裝依賴的方式安裝套件。
安裝完後,回到 package.json 可以看到剛才安裝好的套件。
然後,回到 main.js 將 axios 和 vue-axios 套件 import 進來。我們使用外部套件時,最常用的元件載入方式有兩種,第一種是上述提到的「全域註冊」,第二種是「把套件加到 Vue 的藍圖(原型)內」,而這裡使用的即是第二種方法 Vue.use(VueAxios, axios)
使用 vue-axios
有以下三種使用方法,與原生的 axios 寫法幾乎相同:
Vue.axios.get(api).then((response) => {
console.log(response.data)
})this.axios.get(api).then((response) => {
console.log(response.data)
})this.$http.get(api).then((response) => {
console.log(response.data)
})
因為 App.vue 和 main.js 是有關連的,所以回到 App.vue 便可直接使用 vue-axios
環境變數
因為每個環境(開發團隊、內部測試主機、正式機)所使用到的參數都不太一樣,因此需要獨立出來一個環境變數,他是一個 .env 的形式,會跟專案獨立開來,另外存出一份檔案,這個環境變數可以被修改,方便給不同環境下做使用。
Vue CLI 環境變數(文件)
Vue CLI 的環境變數是用 node.js 來做運行的,變數的開頭一定要使用 VUE_APP_
,後面接自定義名稱,如下:
VUE_APP_UUID=
VUE_APP_APIPATH=
在專案資料夾根目錄上,新增一個 .env 的檔案。並在檔案內代入環境變數的名稱(開頭VUE_APP_
)和值(皆為字串,不需要引號)。
回到 App.vue,將剛才建立好的環境變數代入。由於這個環境變數是使用 node.js 來做運行的,所以要在變數前面再加上 process.env
(node.js 環境變數的語法),加入樣板字面值的完整寫法為${process.env.VUE_APP_APIPATH}
,如下所示:
回到頁面上時,回發現跳出錯誤訊息,如下。undefined 的部份就是剛才替換成環境變數的地方。
出錯的原因是,每當加入環境變數(或修改環境變數)時,沒辦法馬上讀取到,一定要重新啟動,所以回到 vue ui 的 serve 將執行狀態停止後再重新執行。
回到頁面重新整理後,便能順利取得環境變數。