update: 搭建完毕

package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

public/index.html

@@ -13,5 +13,8 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/lib/axios/0.18.0/index.min.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script>
   </body>
 </html>

src/App.vue

 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+ 
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
-  }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

src/api/common.js

+import { request } from './service';
+ 
+export function postApi (data) { // post
+  return request({
+    method: 'post',
+    url: '/haoban-commission-web/activity/queryByPage',
+    data,
+  });
+}
+export function getApi (params) { // get
+  return request({
+    method: 'get',
+    url: '/api-mall/page-simple-mall-goods',
+    params,
+  });
+}
+ 
\ No newline at end of file

src/api/service.js

+import axios from 'axios';
+import qs from 'qs';
+
+const service = axios.create();
+
+service.defaults.timeout = 30000;
+ 
+service.interceptors.request.use((config) => {
+  return config;
+}, (err) => {
+  return Promise.reject(err);
+});
+
+service.interceptors.response.use((response) => {
+  const { data, config } = response;
+  let err;
+  const { errorCode, code } = data;
+  if( errorCode==0||code==0){
+    return data.result;
+  }else{
+    err = new Error(`${data.message}: ${config.url}`);
+    return Promise.reject(err);
+  }
+}, (err) => {
+  const status = err.response.status;
+  switch (status) {
+    case 400: err.message = '请求错误'; break;
+    case 401: err.message = '未授权，请登录'; break;
+    case 403: err.message = '拒绝访问'; break;
+    case 404: err.message = `请求地址出错: ${err.response.config.url}`; break;
+    case 408: err.message = '请求超时'; break;
+    case 500: err.message = '服务器内部错误'; break;
+    case 501: err.message = '服务未实现'; break;
+    case 502: err.message = '网关错误'; break;
+    case 503: err.message = '服务不可用'; break;
+    case 504: err.message = '网关超时'; break;
+    case 505: err.message = 'HTTP版本不受支持'; break;
+    default: break;
+  }
+  return Promise.reject(err);
+});
+
+export function request (config) {
+  const defaultConfig = {
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    params: {},
+    data: {},
+  };
+  if (config.url.match(/requestProject/) === null) {  // 仅仅提供演示作用，如果用不到，删掉
+    config.url = config.url + '?requestProject=sale-manage';
+  }
+  config = Object.assign(defaultConfig, config);
+  if (config.useForm) {
+    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+    config.data = qs.stringify(config.data);
+  }
+  return service(config);
+}

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/cmh/index.vue

+<template>
+  <div>
+      {{name}}
+      <router-link>规则</router-link>
+  </div>
+</template>
+
+<script>
+import { postApi, getApi} from '@/api/common.js'
+export default {
+  data(){
+    return{
+      name:'猜盲盒'
+    }
+  },
+  created(){
+    this.postApi();
+    this.getApi();
+  },
+  methods:{
+    postApi(){
+      postApi({search:'123'}).then(res=>{
+        console.log(res);
+      })
+    },
+     getApi(){
+      getApi({search:'123'}).then(res=>{
+        console.log(res);
+      })
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/components/cmh/rule.vue

+<template>
+  <div>游戏规则</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/main.js

 import Vue from 'vue'
 import App from './App.vue'
+import axios from 'axios';
+import router from './router';
 
 Vue.config.productionTip = false
+Vue.prototype.axios = axios;
+Vue.prototype.axios.defaults.withCredentials = true;
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '/',
+    name: '猜盲盒',
+    component: () => import('@/components/cmh/index.vue'),
+  },
+  {
+    path: '/rule',
+    component: () => import('@/components/cmh/rule.vue'),
+    name: '游戏规则'
+  },
+];
+
+const router = new VueRouter({
+  base: '/',
+  routes,
+});
+
+export default router;

vue.config.js

+
+const path = require('path');
+
+function resolve (dir) {
+  return path.join(__dirname, dir);
+}
+
+module.exports = {
+  productionSourceMap: false,
+  publicPath: './',
+  devServer: {
+    proxy: {
+      '/': {
+        target: 'http://gicdev.demogic.com/',
+        changeOrigin: true,
+        cookieDomainRewrite: {
+            '*': 'localhost',
+          },
+          cookiePathRewrite: {
+            '*': '/',
+          },
+      },
+    },
+  },
+  configureWebpack: config => {
+    config.externals = {
+      vue: 'Vue',
+      'vue-router': 'VueRouter',
+      axios: 'axios',
+    };
+  },
+  chainWebpack: (config) => {
+    config.resolve.alias
+      .set('@', resolve('src'));
+  },
+};

yarn.lock

@@ -1901,6 +1901,14 @@ aws4@^1.8.0:
   resolved "https://registry.npmmirror.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.npmmirror.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2604,7 +2612,7 @@ color@^3.0.0:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -3985,7 +3993,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.9:
   version "1.15.0"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4"
   integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==
@@ -4000,6 +4008,15 @@ forever-agent@~0.6.1:
   resolved "https://registry.npmmirror.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.npmmirror.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -8256,6 +8273,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.2.0:
+  version "3.5.3"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
+  integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"