{"id":1029,"date":"2022-07-23T12:56:00","date_gmt":"2022-07-23T04:56:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1029"},"modified":"2022-07-25T13:40:44","modified_gmt":"2022-07-25T05:40:44","slug":"vue-cli%e4%ba%8c%e6%ac%a1%e5%b0%81%e8%a3%85%e6%8b%a6%e6%88%aa%e5%99%a8%e7%af%87","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1029","title":{"rendered":"Vue-cli\u4e8c\u6b21\u5c01\u88c5(axios\u62e6\u622a\u5668\uff0capi\u5c01\u88c5\u7bc7)"},"content":{"rendered":"\n

\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u505a\u4e00\u4e9bspa\u5355\u9875\u5f00\u53d1\uff0c\u4f1a\u57fa\u4e8e\u8fd9\u4e2aVueCli\u6765\u6784\u5efa\u9879\u76ee\uff0c<\/p>\n\n\n\n

\u521b\u5efa\u4e00\u4e2a\u9879\u76ee\uff1ahttps:\/\/cli.vuejs.org\/zh\/guide\/creating-a-project.html<\/a><\/p>\n\n\n\n

vue create#<\/a><\/h2>\n\n\n\n

\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u6765\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee\uff1a<\/p>\n\n\n\n

vue create hello-world\n<\/code><\/pre>\n\n\n\n
\"CLI<\/figure>\n\n\n\n
\u8fd9\u4e2a\u9ed8\u8ba4\u7684\u8bbe\u7f6e\u975e\u5e38\u9002\u5408\u5feb\u901f\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee\u7684\u539f\u578b\uff0c\u800c\u624b\u52a8\u8bbe\u7f6e\u5219\u63d0\u4f9b\u4e86\u66f4\u591a\u7684\u9009\u9879\uff0c\u5b83\u4eec\u662f\u9762\u5411\u751f\u4ea7\u7684\u9879\u76ee\u66f4\u52a0\u9700\u8981\u7684\u3002<\/p>\n\n\n\n
\"CLI<\/figure>\n\n\n\n
\u9879\u76ee\u521b\u5efa\u5b8c\u4e86\uff0c\u4f46\u662f\u901a\u5e38\u65e0\u6cd5\u6ee1\u8db3\u6211\u4eec\u7684\u4e00\u4e9b\u5f00\u53d1\u9700\u6c42\uff0c<\/p>\n\n\n\n
\u6bd4\u5982\uff1a<\/p>\n\n\n\n
1.\u670d\u52a1\u5668\u4ea4\u4e92\u8bf7\u6c42\u65f6\u7684 axios \u62e6\u622a\u5668\u8fc7\u6ee4\u3002<\/p>\n\n\n\n
2.\u5f00\u53d1\u4e0e\u751f\u4ea7\u73af\u5883\u7684\u63a5\u53e3\u534f\u8bae\uff0c\u8de8\u57df\u8bf7\u6c42\u5904\u7406\u3002<\/p>\n\n\n\n
3.webpack\u5e38\u7528\u7684\u914d\u7f6e\u7b56\u7565css\u538b\u7f29\uff0c\u8f93\u51fa\u914d\u7f6e\u3002<\/p>\n\n\n\n
so<\/p>\n\n\n\n
\u9488\u5bf9VueCli\u81ea\u5df1\u6dfb\u52a0\u4e86\u4e00\u5957\u5feb\u901f\u5f00\u53d1\u7684\u67b6\u5b50\uff0c\u8fd9\u5757\u5206\u4e3a3\u70b9\u6765\u8bf4\uff0c<\/p>\n\n\n\n
\u9996\u5148\u770b\u4e0b\u76ee\u5f55\u7ed3\u6784\uff1a<\/p>\n\n\n\n
\"\"
\u76ee\u5f55\u7ed3\u6784<\/figcaption><\/figure>\n\n\n\n
\u4e00\u4e2a\u8bf7\u6c42\u7684\u5c01\u88c5\u8981\u8003\u8651\u51e0\u70b9<\/p>\n\n\n\n
1.\u62e6\u622a\u5668\u6587\u4ef6\u8981\u660e\u786e–\u8bf7\u6c42\u4e0e\u54cd\u5e94\u89c4\u5219(\u73af\u5883config\uff0c \u6b63\u786e\uff0c\u5f02\u5e38\uff0c\u5931\u8d25)\u3002<\/p>\n\n\n\n
2.api\/\u5c01\u88c5\u7684\u8bf7\u6c42\u811a\u672c\u8981\u8003\u8651–\u6a21\u5757\u5316\uff0c\u8bf7\u6c42\u5730\u5740url,\u8bf7\u6c42\u65b9\u5f0fmethod,\u8bf7\u6c42\u53c2\u6570params\u3002<\/p>\n\n\n\n
3.\u9488\u5bf9\u5c01\u88c5\u7684api\u811a\u672c\u7684\u590d\u7528\u6027\uff0c\u8026\u5408\u5ea6\u8981\u8fdb\u884c\u62c6\u89e3\u3002<\/p>\n\n\n\n
\u76f4\u63a5\u8d34\u4ee3\u7801\u5427\uff0c\u66f4\u6e05\u695a\u4e00\u4e9b\uff1a<\/p>\n\n\n\n
require.js\n\nimport axios from \"axios\";\n\n\/\/ create an axios instance\nconst service = axios.create({\n  baseURL: process.env.VUE_APP_BASE_API, \/\/ url = base url + request url\n  \/\/ withCredentials: true, \/\/ send cookies when cross-domain requests\n  timeout: 5000, \/\/ request timeout\n});\n\n\/\/ request interceptor\nservice.interceptors.request.use(\n  (config) => {\n    \/\/ do something before request is sent\n\n    \/\/ let each request carry token\n    \/\/ ['X-Token'] is a custom headers key\n    \/\/ please modify it according to the actual situation\n\n    return config;\n  },\n  (error) => {\n    \/\/ do something with request error\n    console.log(error); \/\/ for debug\n    return Promise.reject(error);\n  }\n);\n\n\/\/ response interceptor\nservice.interceptors.response.use(\n  \/**\n   * If you want to get http information such as headers or status\n   * Please return  response => response\n   *\/\n\n  \/**\n   * Determine the request status by custom code\n   * Here is just an example\n   * You can also judge the status by HTTP Status Code\n   *\/\n  (response) => {\n    const res = response.data;\n\n    \/\/ if the custom code is not 20000, it is judged as an error.\n    if (res.code !== 0) {\n      console.log(res);\n\n      return Promise.reject(new Error(res.message || \"Error\"));\n    } else {\n      return res;\n    }\n  },\n  (error) => {\n    console.log(\"err\" + error); \/\/ for debug\n\n    return Promise.reject(error);\n  }\n);\n\nexport default service;\n<\/code><\/pre>\n\n\n\n
gameHistory.js\n\nimport request from \"@\/utils\/request\";\n\nexport function battle(params) {\n  return request({\n    url: \"\/api\/history\/battle\",\n    method: \"get\",\n    params,\n  });\n}\n\nexport function player(params) {\n  return request({\n    url: \"\/api\/history\/player\",\n    method: \"get\",\n    params,\n  });\n}\n\nexport function game(params) {\n  return request({\n    url: \"\/api\/history\/game\",\n    method: \"get\",\n    params,\n  });\n}\n\nexport function captured(params) {\n  return request({\n    url: \"\/api\/history\/captured\",\n    method: \"get\",\n    params,\n  });\n}\n\n\/\/ export function update(data) {\n\/\/   return request({\n\/\/     url: \"\/api\/game-history\/update\",\n\/\/     method: \"put\",\n\/\/     data,\n\/\/   });\n\/\/ }\n<\/code><\/pre>\n\n\n\n
\u5728\u4f7f\u7528\u65f6\u5728\u5bf9\u5e94\u7684vue\u6587\u4ef6\u4e2d<\/p>\n\n\n\n
1.\u5f15\u5165api\u5c01\u88c5\u7684\u4ee3\u7801\u5757 import { player } from “..\/api\/gameHistory”;<\/p>\n\n\n\n
2.\u5728vue\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570 mounted\u5c01\u88c5\u5982\u4e0b\u4ee3\u7801\u5757(\u4e3a\u65b9\u4fbf\u6f14\u793a\u76f4\u63a5\u62c6\u89e3\u4e86)<\/p>\n\n\n\n
mounted: function () {\n    \/\/\u8bf7\u6c42history\/player\u63a5\u53e3\n    this.playerInForXHR();\n  },\nmethods: {\n    playerInForXHR() {\n      player({\n        round_id: xx,\n        match_id: xx\n      })\n        .then((res) => {\n          this.data = res.data;\n        })\n        .catch((err) => {\n          console.log(err);\n        });\n    },\n}<\/code><\/pre>\n\n\n\n
\u901a\u8fc7axios\u8bf7\u6c42 \u62ff\u5230\u5f02\u6b65then\u7684\u94fe\u5f0f\u56de\u8c03\u6570\u636e\uff0c\u4e00\u4e2a\u8fc7\u7a0b\u8bf7\u6c42\u4e0e\u54cd\u5e94\u5c31\u5b8c\u6210\u4e86 \u3002<\/p>\n\n\n\n
\u63a5\u4e0b\u6765\u770b\u63a5\u53e3\u7684conifg\u914d\u7f6e:<\/p>\n\n\n\n
\u8fd9\u91cc\u9700\u8981\u51e0\u4e2a\u6587\u4ef6\uff0c\u5f00\u53d1\u4e0e\u751f\u4ea7\u63a5\u53e3\u914d\u7f6e<\/p>\n\n\n\n
.env.dev, .env.development, .env.production, <\/p>\n\n\n\n
# just a flag\nENV = 'development'\n\n# base api\nVUE_APP_BASE_API = '\u5f00\u53d1\u7684url\u8bf7\u6c42\u524d\u7f00\u5730\u5740'\n<\/code><\/pre>\n\n\n\n
# just a flag\nENV = 'production'\n\n# base api\nVUE_APP_BASE_API = '\u6b63\u5f0f\u7684url\u8bf7\u6c42\u524d\u7f00\u5730\u5740'\n\n<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u505a\u4e00\u4e9bspa\u5355\u9875\u5f00\u53d1\uff0c\u4f1a\u57fa\u4e8e\u8fd9\u4e2aVueCli\u6765\u6784\u5efa\u9879\u76ee\uff0c \u521b\u5efa\u4e00\u4e2a\u9879\u76ee\uff1ahttps:\/\/cli.v […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41],"tags":[19,38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1029"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1029"}],"version-history":[{"count":3,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1029\/revisions"}],"predecessor-version":[{"id":1033,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1029\/revisions\/1033"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1029"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}