0%

[Vue] Vue CLI 2 建置與運作

發表於 更新於 分類於 Disqus：

雖然 Vue CLI 2 現在已經出到 3 了，但還是把自己學習使用 2 所做的筆記放上來，說不定依然能提供給各位做參考（？

什麼是 Vue CLI？

  • 基於 Webpack 所建置的開發工具
  • 便於使用各種第三方工具（BS4, Vue Router…）
  • 可運行 Sass, Bebel 等編譯工具
  • 便於開發 SPA 的網頁工具
  • 簡單設定就能搭建開發時常用的環境

下載

  1. npm install -g vue-cli
  2. 輸入 vue：出現許多可使用的指令，例如輸入 vue list 能夠選擇下載的樣板，選擇 webpack 樣板即可
  3. 新增專案：輸入 vue init 樣板名稱 專案名稱

Vue CLI 指令

npm install：安裝所有套件
npm run dev：運行開發的環境
npm run build：運行正式版的環境，將所有網頁內容打包壓縮

npm run 是運行 package.json 內的 script，運行時可以直接執行 node_modules 內的模組。

Vue CLI 產生的資料夾結構

  • dist：這資料夾下的檔案都要放在 server 下才能正常運作，主要是透過 npm run bulid 生成的。每次輸入 npm run build 的時候 dist 會自動重新生成，並加上不同的 hash 在資源上，避免有暫存而沒有取到新資源。

  • 根目錄的 index.html：不需要動，Vue CLI 會自動把 JS 資源注入在 #app 下方註解的位置。

  • static：放入不會被編譯的檔案。

  • src：放入會被編譯的檔案，開發都在這邊，底下的 main.js 就是所有 vue.js 的進入點。在這之下的 assets 資料夾會針對特定尺寸的圖片，編譯成 base 64。

  • .postcssrc.js：替 CSS 編譯加入前綴詞的設定檔

  • .babelrc：替 ES6 編譯的設定檔

在 vue-cli 中都是使用元件來互相引用。

例如在 components 資料夾內的 .vue 檔，一個檔案就是一個元件，.vue 中包含 x-template、<script>、<style>，之後就可以在其他檔案中載入這支元件檔案。

Webpack 腳本結構

Webpack 如何運作

main.js 為主要檔案（稱為 entry，進入點），會載入其他相依的檔案，例如 .scss、.vue 等等，這些相依的檔案會透過 loader 工具，把要載入 main.js 的內容轉譯為 .js 檔可以閱讀的格式。

接著 Webpack 會監控 main.js 及這些載入的內容，當它們一更動時就會進行編譯，並輸出（output）為 .js、.css、.jpg 等檔案。

build 資料夾

在 build 資料夾中有三個 webpack 開頭的檔案，分別為 webpack.base、webpack.dev、webpack.prod。

  • webpack.base：最重要的檔案，其他兩個檔案都會引用它。
    • 裡面有各項設定，包含進入點檔案（entry）、輸出路徑（output）、省略附檔名（resolve）及路徑縮寫（alias）、loader 規則（modules）。
    • loader 的規則在 modules 之下，但除了在這邊有關於檔案編譯的設定以外，在同資料夾的 utils.js 也有，例如關於 css、postcss、sass 的編譯。
    • modules 中有關於編譯圖檔的設定，低於 10 kb 的圖檔會被壓縮成 base 64，如果高於 10 kb 則會輸出為圖檔並加上 hash 字串。
  • webpack.dev ：開發中的版本，用途是讓我們在開發中可以預覽畫面，不太需要修改。
  • webpack.prod：負責的則是輸出的結果，不太需要修改。

config 資料夾

webpack.base output 的設定中，可以看到有關於 config 資料夾的檔案。

config 資料夾有三個檔案：index.js、dev.env.js、prod.env.js。

index 是用於設定整個編譯環境，可以設定 host 跟 port；其餘兩支檔案是用於撰寫環境變數，可以輸出到 .vue 中，輸出方法是在 .vue 檔裡這樣設定：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
     msg: process.env.NODE_ENV
     // process.env 是 webpack 讀取資源的路徑
     // 如果是在開發環境就會讀取 dev.env
     // 正式環境就會讀取 prod.env
     // 後面接的是環境變數
    }
  }
}
</script>

NODE_ENV 是寫在 dev.env 及 prod.env 中的變數，值要記得用 '""' 包住，否則會讀取失敗。

環境變數常用於 AJAX，因為 AJAX 使用的路徑在開發版跟正式版中往往是不同的，所以就可以用環境變數去區分。

透過 Vue CLI 載入外部套件

Bootstrap

下載 BS，順便把 node-sass 及 sass loader 等兩個套件一起下載：

1
npm install bootstrap node-sass sass-loader --save

下載完成後，Vue CLI 需要重新運行：

1
npm run dev

打開 App.vue，在 <style> 上加上 lang="scss"，並且把原本的 style 內容改成 sass 的格式，測試 sass 是否能正確運行：

1
2
3
4
$color: black;
body{
  background-color: $color;
}

如果測試成功，就可以把測試內容刪掉，並輸入以下程式碼把 BS 載進來：

1
@import "~bootstrap/scss/bootstrap";

元件的 <style> scoped 屬性

如果元件的 <style> 有加上 scoped 屬性，意思是這些樣式只適用於這個元件，其他元件不會吃到它的樣式。

vue-axios

AJAX 的工具，使用非同步的 Promise 製作。

下載 axios 及 vue-axios：

1
npm install --save axios vue-axios

下載好以後重新運行：

1
npm run dev

axios 文件中有寫該如何使用，在進入點檔案中加入以下程式碼：

1
2
3
4
5
import Vue from 'vue' // Vue CLI 已經載入好了
import axios from 'axios' // 主要的 AJAX 套件
import VueAxios from 'vue-axios' // 將它轉為 Vue 的套件

Vue.use(VueAxios, axios) // 執行 axios

測試 AJAX 是否能成功：在 App.vue 的 export default 中，加入 created()。

1
2
3
4
5
created() {
  this.$http.get('https://randomuser.me/api/').then((response) => {
    console.log(response.data);
  });
}

vue-axios AJAX 使用方式在官網有寫。