Vue 初心者筆記 #35 複習開發環境的建置

接下來我們會結合之前的概念與練習,來試著使用 Vue 完成一個電商網站。從零開始的第一步就是環境設定,主要就是建置 Vue Webpack 的環境,然後加上 Router 與一些外部套件。

環境設定篇

1. 建置環境

2. 遠端 API 路徑

  • API 伺服器路徑:https://example.io
  • 所申請的 API Path:sealman

但是 API 路徑寫在程式碼內其實不是很好,因為後續可能還會做修改,所以改寫在 config 內。

config/dev.env.js

在 config 內有 dev.env.js 與 prod.env.js 檔案。
dev.env.js 是在開發中的環境使用的,而 prod.env.js 是正式的環境使用的。

注意!接下來這裡是使用單引號 + 雙引號

1
2
3
4
5
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
APIPATH: '"https://example.io"',
CUSTOMPATH: '"sealman"',
});

App.vue

將剛才設定好的路徑放進來 get 看看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
name: 'App',
components: {
HelloWorld,
},
created() {
// 遠端 API 的路徑
const api = `${process.env.APIPATH}api/${process.env.CUSTOMPATH}/products`;
console.log(process.env.APIPATH, process.env.CUSTOMPATH);
this.$http.get(api).then((response) => {
console.log(response.data);
});
},
};

3. 客製化 Bootstrap

接下來設定一下預計會用到的 Bootstrap。

  1. 在 assets 資料夾新增 all.scss 檔案,方便管理 SCSS

    all.scss

    1
    2
    3
    4
    5
    6
    // 載入 Bootstrap 套用變數的方法,有這些方法才能正確啟用下面自訂的變數
    @import "~bootstrap/scss/functions";
    // 自定義的變數
    @import "./helpers/variables";
    // 載入 node_modules 裡的 bootstrap/scss/bootstrap.scss 檔案
    @import "~bootstrap/scss/bootstrap";
  2. 從 assets 資料夾引入 Bootstrap

    App.vue

    1
    2
    3
    4
    <style lang="scss">
    /* 後面的 .scss 可以省略 */
    @import "./assets/all";
    </style>
    • <style lang="scss"> 代表要使用 SCSS 的語法
    • <style scoped> 代表裡面的樣式只適用於該元件內
  3. 新增 helpers 資料夾,並將 node_modules 裡的 _variables.scss 複製一份過來

    _variables.scss 放在 helpers 資料夾內,可避免原始套件路徑衝突
    我們可以透過修改裡面的變數,來自定義 Bootstrap 的樣式

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。