iT邦幫忙

0

Day35 - 實戰之開啟新專案

這裡開始是實戰的學習紀錄,首先我們要先創建一個新專案,採用 Vue Cli
安裝辦法參考這裡 鐵人賽Day28 - Vue Cli

接著進行 vue router 的安裝跟配置 鐵人賽Day30 - Vue Router 及配置路由文件

接著我們要來安裝 axios 套件,同樣也可以參考 鐵人賽Day28 - Vue Cli

都好了之後,因為我有申請私人的 API 所以這裡就不多贅述
先到 App.vue 測試剛剛的 API 是否能用,到 script 的地方新增一個 createdhook,在參考 axios 官方文件的使用方法讀取 API:

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    const api = 'https://vue-course-api.hexschool.io/api/jerryproduct/products';
    this.$http.get(api).then((response) => {
      console.log(response.data);
    });
  },
}
</script>

好了之後,因為有時候 API 的伺服器會變,所以我們要把網址的部分給獨立出去
這時候到 config 資料夾底下,會有 dev.env.js 這隻檔案,這個是開發時候拿來放置環境變數的,prod.env.js 是正式上線的版本,所以到時候在 dev.env.js 新增的環境變數也都要複製過去 prod.env.js
dev.env.js 之後,我們新增兩個環境變數:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  APIPATH: '"https://vue-course-api.hexschool.io"',
  CUSTOMPATH: '"jerryproduct"',
})

主要就是 APIPATHCUSTOMPATH
接著我們到 App.vue 來測試看看兩個變數是否能運行:

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    const api = 'https://vue-course-api.hexschool.io/api/jerryproduct/products';
    console.log(process.env.APIPATH, process.env.CUSTOMPATH);
    this.$http.get(api).then((response) => {
      console.log(response.data);
    });
  },
}
</script>

主要是 console 那行程式碼,確定能運行之後,我們就可以稍微改寫一下變數 api 了:

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    const api = `${process.env.APIPATH}/api/${process.env.CUSTOMPATH}/products`;
    this.$http.get(api).then((response) => {
      console.log(response.data);
    });
  },
}
</script>

主要是變數 api 的部分,用 ES6 的字串模板給組起來了


尚未有邦友留言

立即登入留言