Day35 - 实战之开启新专案

这里开始是实战的学习纪录，首先我们要先创建一个新专案，採用 Vue Cli
安装办法参考这里 铁人赛Day28 - Vue Cli

接着进行 vue router 的安装跟配置 铁人赛Day30 - Vue Router 及配置路由文件

接着我们要来安装 axios 套件，同样也可以参考 铁人赛Day28 - Vue Cli

都好了之后，因为我有申请私人的 API 所以这里就不多赘述
先到 App.vue 测试刚刚的 API 是否能用，到 script 的地方新增一个 created 的 hook，在参考 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"',})

主要就是 APIPATH 和 CUSTOMPATH
接着我们到 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 的字串模板给组起来了