走進Vue的秘密森林 01：環境建置

發表於 | 更新於 | In | 0 comments |
文章字數 : 557 | 所需閱讀時間 ≈ 2 分鐘

接著，開始將前面介紹到的功能整合
準備試著打造出一個屬於自己的電商網站！

前置作業

環境建置

API路徑設定

  • api測試建置
    API伺服器：https://example.com/
    API Path：balajasa

API路徑可能隨時會變動，需將路徑建立在 /config/dev.env.js(開發用環境) 及 /config/prod.env.js(正式用環境)
※ 在撰寫時，可先加在dev.env.js內，但在完成釋出時需注意也要將測試無誤的路徑加在prod.env.js中

1
2
3
4
5
6
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  APIPATH: '"https://example.com/"', // API路徑
  CUSTOMPATH: '"balajasa"', // 自定義PATH路徑
  // 注意需在單引號內再加入雙引號!!
})

  • 測試是否設置成功
    至app.vue中測試是否有增加成功，這邊Cli2和Cli3的設置方法有些不同

    1
    2
    3
    4
    5
    // Cli 2.x
    console.log(process.env.APIPATH , process.env.CUSTOMPATH);  

    // Cli 3.x
    console.log(process.env.VUE_APP_APIPATH , process.env.VUE_APP_CUSTOMPATH);

  • 將API網址改為使用環境變數取得
    上方變數測試無誤後，將原先的API網址改使用環境變數取得資料，環境變數對應的檔案是dev.env.js裡 module.exports中新增的變數

※ 這邊會使用Cli 3為範例

1
const api = `${process.env.VUE_APP_APIPATH}/api/${process.env.VUE_APP_CUSTOMPATH}/products`;

加入Bootstrap套件

直接載入bootstrap

1.至app.vue中，在style後方加入lang=”scss”，並引入scss檔案

1
2
3
<style lang="scss">
	@import "~bootstrap/scss/bootstrap";  // 直接載入bootstrap
</style>

  • 若引入成功會顯示scss樣式資訊

2.獨立客制化scss檔案
在src/assets新增一個all.scss檔案，並在裡面增加

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

回到app.vue中，將all.scss載入

1
2
3
<style lang="scss">
	@import "./assets/all";  // 載入all.scss (scss可省略)
</style>
  • <style lang="scss">：代表要使用 CSS 的語法
  • <style scoped>：代表只在此元件內使用

這邊會把檔案另存新檔至src/assets/helpers，新增一個資料夾路徑且修改裡面的變數，避免與原始套件衝突。