INIT

.env.dev

+NODE_ENV = 'development'
+VUE_APP_TITLE = 'dev'
+VUE_APP_BASEURL ='/api'
\ No newline at end of file

.env.pro

+NODE_ENV = 'production'
+VUE_APP_TITLE = 'pro'
+VUE_APP_BASEURL ='//testvideos.zwjk.com/advice/'

.eslintrc.js

+module.exports = {
+    root: true,
+    env: {
+      node: true
+    },
+    'extends': [
+      'plugin:vue/essential',
+      'eslint:recommended'
+    ],
+    parserOptions: {
+      parser: '@babel/eslint-parser'
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+       //在rules中添加自定义规则
+       //关闭组件命名规则
+       "vue/multi-word-component-names": "off",
+      "vue/no-unused-components": "off",
+       "no-unused-vars":'off'
+    },
+    overrides: [
+      {
+        files: [
+          '**/__tests__/*.{j,t}s?(x)',
+          '**/tests/unit/**/*.spec.{j,t}s?(x)'
+        ],
+        env: {
+          jest: true
+        }
+      }
+    ]
+  }
+  
\ No newline at end of file

package.json

@@ -3,13 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve --mode dev",
+    "build": "vue-cli-service build --mode pro",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "ant-design-vue": "^1.7.4",
+    "axios": "^0.27.2",
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "less": "^4.1.3",
+    "sass-loader": "^13.0.2",
+    "vue": "^2.6.14",
+    "vue-cookie": "^1.1.4",
+    "vue-router": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -19,6 +26,7 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "less-loader": "^6.2.0",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
@@ -33,7 +41,9 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "vue/multi-word-component-names": "off"
+    }
   },
   "browserslist": [
     "> 1%",

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 lang="less">
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
+      'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif !important;
+  /* -webkit-font-smoothing: antialiased; */
+  font-size: 14px;
+  color: #000;
+}
+
+.standalone-style {
+  /* height: 100vh; */
+}
+
+.go-back {
+  height: 64px;
+  background: #fff;
+  box-shadow: 0 2px 6px 0px rgba(0, 0, 0, .08);
+  padding: 0 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.hasBackHeader {
+  height: calc(100vh - 64px);
+  overflow-y: auto;
+}
+.ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-submenu-title:hover {
+  background-color: rgba(22, 191, 213, 0.1) !important;
+}
+.ant-dropdown-menu-item,
+.ant-dropdown-menu-submenu-title {
+  color: rgba(0, 0, 0, 0.65) !important;
 }
 </style>
+

src/api/index.js

+import axios from './axios-instance';
+
+// export function getUserInfo() {
+//   return axios.post('/unioncenter/web-background/account/get-by-token');
+// }
+
+// export function getUserFunctionList() {
+//   return axios.get('/unioncenter/web-background/role-function/get-user-functions');
+// }

src/assets/styles/common.css

+.d-flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.align-start {
+    -ms-flex-align: start;
+    align-items: flex-start
+}
+
+.align-end {
+    -ms-flex-align: end;
+    align-items: flex-end
+}
+
+.align-center {
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.justify-start {
+    -ms-flex-pack: start;
+    justify-content: flex-start
+}
+
+.justify-end {
+    -ms-flex-pack: end;
+    justify-content: flex-end
+}
+
+.justify-center {
+    -ms-flex-pack: center;
+    justify-content: center
+}
+
+.justify-space-around {
+    -ms-flex-pack: distribute;
+    justify-content: space-around
+}
+
+.justify-space-between {
+    -ms-flex-pack: justify;
+    justify-content: space-between
+}
+
+.condition {
+  margin-bottom: 24px;
+}
+ 
+.module {
+  background-color: var(--module-bg);
+  padding: 16px 24px;
+}
+
+/* 文字按钮颜色 */
+.color1890ff {
+  color: var(--main-color);
+  cursor: pointer;
+}
+
+/* 权限灰色禁用样式 */
+.color999999 {
+  color: #999999;
+  cursor: not-allowed;
+}
+
+/* overflow */
+.overflow-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

src/assets/styles/font.css

+@font-face {
+  font-family: 'iconfont';  /* Project id 1926676 */
+  src: url('//at.alicdn.com/t/font_1926676_qwxnsrbjt6.woff2?t=1653899952490') format('woff2'),
+       url('//at.alicdn.com/t/font_1926676_qwxnsrbjt6.woff?t=1653899952490') format('woff'),
+       url('//at.alicdn.com/t/font_1926676_qwxnsrbjt6.ttf?t=1653899952490') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconziyuan73:before {
+  content: "\e632";
+}
+
+.iconziyuan84:before {
+  content: "\e633";
+}
+
+.iconziyuan85:before {
+  content: "\e634";
+}
+
+.iconziyuan83:before {
+  content: "\e635";
+}
+
+.iconziyuan81:before {
+  content: "\e636";
+}
+
+.iconziyuan82:before {
+  content: "\e637";
+}
+
+.iconziyuan79:before {
+  content: "\e638";
+}
+
+.iconziyuan78:before {
+  content: "\e639";
+}
+
+.iconziyuan80:before {
+  content: "\e63a";
+}
+
+.iconziyuan76:before {
+  content: "\e63b";
+}
+
+.iconziyuan75:before {
+  content: "\e63c";
+}
+
+.iconziyuan77:before {
+  content: "\e63d";
+}
+
+.iconziyuan74:before {
+  content: "\e63e";
+}
+
+.iconziyuan197:before {
+  content: "\e60a";
+}
+
+.iconziyuan198:before {
+  content: "\e60b";
+}
+
+.iconziyuan200:before {
+  content: "\e60c";
+}
+
+.iconziyuan199:before {
+  content: "\e60d";
+}
+
+.iconziyuan201:before {
+  content: "\e60e";
+}
+
+.iconziyuan204:before {
+  content: "\e60f";
+}
+
+.iconziyuan207:before {
+  content: "\e610";
+}
+
+.iconziyuan202:before {
+  content: "\e611";
+}
+
+.iconziyuan205:before {
+  content: "\e612";
+}
+
+.iconziyuan208:before {
+  content: "\e613";
+}
+
+.iconziyuan212:before {
+  content: "\e614";
+}
+
+.iconziyuan209:before {
+  content: "\e615";
+}
+
+.iconziyuan206:before {
+  content: "\e616";
+}
+
+.iconziyuan211:before {
+  content: "\e617";
+}
+
+.iconziyuan203:before {
+  content: "\e618";
+}
+
+.iconziyuan213:before {
+  content: "\e619";
+}
+
+.iconziyuan221:before {
+  content: "\e61a";
+}
+
+.iconziyuan220:before {
+  content: "\e61b";
+}
+
+.iconziyuan216:before {
+  content: "\e61c";
+}
+
+.iconziyuan214:before {
+  content: "\e61d";
+}
+
+.iconziyuan210:before {
+  content: "\e61e";
+}
+
+.iconziyuan219:before {
+  content: "\e61f";
+}
+
+.iconziyuan224:before {
+  content: "\e620";
+}
+
+.iconziyuan229:before {
+  content: "\e621";
+}
+
+.iconziyuan218:before {
+  content: "\e622";
+}
+
+.iconziyuan215:before {
+  content: "\e623";
+}
+
+.iconziyuan222:before {
+  content: "\e624";
+}
+
+.iconziyuan228:before {
+  content: "\e625";
+}
+
+.iconziyuan232:before {
+  content: "\e626";
+}
+
+.iconziyuan225:before {
+  content: "\e627";
+}
+
+.iconziyuan227:before {
+  content: "\e628";
+}
+
+.iconziyuan236:before {
+  content: "\e629";
+}
+
+.iconziyuan230:before {
+  content: "\e62a";
+}
+
+.iconziyuan233:before {
+  content: "\e62b";
+}
+
+.iconziyuan226:before {
+  content: "\e62c";
+}
+
+.iconziyuan223:before {
+  content: "\e62d";
+}
+
+.iconziyuan231:before {
+  content: "\e62e";
+}
+
+.iconziyuan234:before {
+  content: "\e62f";
+}
+
+.iconziyuan217:before {
+  content: "\e630";
+}
+
+.iconziyuan235:before {
+  content: "\e631";
+}
+.iconicon_dingwei_mian:before{
+  content: "\e646";
+}
+.iconicon_jinru:before{
+  content: "\e647";
+}
\ No newline at end of file

src/components/sider/index.vue

+<template>
+  <a-menu
+    mode="inline"
+  >
+    <a-sub-menu
+      v-for="route in validRoutes"
+      :key="route.path"
+    >
+      <span slot="title"><a-icon type="setting" /><span> {{ route.name }}</span></span>
+      <a-menu-item   v-for="route2 in route.children" :key="route2.path"  @click="redirectTo(route.path+route2.path)">
+         {{route2.meta.title}}
+        </a-menu-item>
+    </a-sub-menu>
+  </a-menu>
+</template>
+<script>
+import  routerConfig  from '@/router/menuRouter';
+export default {
+  data() {
+    return {
+      routerConfig,
+    };
+  },
+  computed: {
+     validRoutes() {
+      return this.routerConfig.filter(r => !(r.meta && r.meta.standalone));
+    },
+  },
+  methods: {
+    redirectTo(route) {
+      this.$router.push(route);
+    },
+  },
+};
+</script>

src/main.js

 import Vue from 'vue'
 import App from './App.vue'
-
+import router from './router'
+import Antd, { FormModel } from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.less'
+import '@/assets/styles/font.css';
+import '@/assets/styles/common.css';
+import '@/assets/styles/font.css';
 Vue.config.productionTip = false
+Vue.use(Antd);
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/pages/guiderManage/manage/index.vue

+<template>
+<div> 导购管理</div>  
+</template>
\ No newline at end of file

src/pages/guiderManage/material/index.vue

+<template>
+<div> 导购素材</div>  
+</template>
\ No newline at end of file

src/pages/layout.vue

+<template>
+  <div>
+    <a-config-provider :locale="zh_CN">
+      <a-layout>
+        <a-layout-sider
+          v-if="!isInQiankun && !$route.meta.standalone && isDev"
+          style="overflow-x: hidden; height: 100vh"
+        >
+          <sider />
+        </a-layout-sider>
+        <!-- 子应用独立运行时需要显示返回按钮，和在主应用打开保持一致 -->
+        <div v-if="ifShowBackHeader" class="go-back d-flex align-center">
+          <div
+            style="color: var(--text-color-o-65); cursor: pointer"
+            class="d-flex align-center"
+            @click="goBack"
+          >
+            <a-icon type="left" />
+            <span>返回上一页</span>
+          </div>
+        </div>
+        <a-layout-content
+          style="padding: 24px 32px"
+          :class="{ hasBackHeader: ifShowBackHeader }"
+        >
+          <router-view />
+        </a-layout-content>
+      </a-layout>
+    </a-config-provider>
+  </div>
+</template>
+<script>
+import sider from "@/components/sider";
+import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
+export default {
+  components: {
+    sider,
+  },
+  data(){
+    return {
+        zh_CN,
+        isInQiankun: window.__POWERED_BY_QIANKUN__, 
+        isDev: process.env.NODE_ENV === 'development',
+    }
+     
+  },
+   computed: {
+    ifShowBackHeader() {
+      // 是否显示返回的头部栏
+      return this.$route.meta.standalone && !this.isInQiankun;
+    },
+  },
+};
+</script>

src/pages/operate/customerGroupManagement/index.vue

+<template>
+<div> 客户群管理</div>  
+</template>
\ No newline at end of file

src/pages/operate/customerManagement/index.vue

+<template>
+<div> 客户管理</div>  
+</template>
\ No newline at end of file

src/pages/operate/massMessaging/index.vue

+<template>
+<div> 消息群发</div>  
+</template>
\ No newline at end of file

src/pages/operate/welcome/index.vue

+<template>
+  <div>
+    <a-tabs default-active-key="1" @change="callback">
+      <a-tab-pane key="1" tab="Tab 1"> Content of Tab Pane 1 </a-tab-pane>
+      <a-tab-pane key="2" tab="Tab 2" force-render>
+        Content of Tab Pane 2
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="Tab 3"> Content of Tab Pane 3 </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods:{
+    callback(){
+      
+    }
+  }
+};
+</script>

src/pages/test.vue

+<template>
+    <div>HelloWorld</div>
+</template>
+<script>
+import HelloWorld from '@/components/HelloWorld.vue'
+export default {
+  components: {
+    HelloWorld
+  }
+}
+</script>
\ No newline at end of file

src/request/axios-instance.js

+/*
+ * @Author: OBKoro1
+ * @Date: 2022-05-17 15:32:44
+ * @LastEditors: OBKoro1
+ * @LastEditTime: 2022-05-19 10:09:54
+ * @Description:
+ */
+import axios from 'axios';
+import VueCookie from 'vue-cookie';
+import { message } from 'ant-design-vue';
+import store from '@/store';
+import { getToken, logout } from '@/utils';
+
+const instance = axios.create({
+  // baseURL: 'http://192.168.0.104/api',
+  baseURL: '/api',
+  timeout: 10 * 60 * 1000,
+});
+
+const requestHandlers = [(config) => {
+  const token = getToken();
+  if (token != null) {
+    config.headers.authorization = token;
+    config.headers.type = 'unioncenter'; // 类型 商户
+  }
+  return config;
+}, err => Promise.reject(err)];
+
+const responseHandlers = [(response) => {
+  // response.data = { code: '401', msg: 'token错误' };
+  if (response.data instanceof ArrayBuffer || typeof response.data === 'string' || response.data instanceof Blob) {
+    // 处理文件下载
+    return response;
+  }
+  const responseCode = Number(response.data.code);
+  if (responseCode !== 200 && responseCode !== 401) {
+    if (response.data && response.data.code === 'at_001') {
+      return Promise.reject(response.data);
+    }
+    const error = response.data.message || response.data.msg || '后台服务出现错误';
+    message.error(error);
+    return Promise.reject(new Error(`${error}, 错误码: ${response.data.code}`)); // 这里会可能返回特殊的code
+  }
+  if (responseCode === 401) {
+    logout(VueCookie, store);
+    return Promise.reject();
+  }
+  return response.data.data;
+},
+(error) => {
+  if (error.response) {
+    if (error.response.status === 401) {
+      logout(VueCookie, store);
+      return Promise.reject();
+    }
+  }
+  return Promise.reject(error);
+},
+];
+
+instance.interceptors.request.use(...requestHandlers);
+
+instance.interceptors.response.use(...responseHandlers);
+
+export default instance;

src/router/guiderManage.js

+/**导购管理 路由 */
+
+import layout from '@/pages/layout.vue'
+const Routes = [{
+  path: '/guiderManage/',
+  name: '导购管理',
+  meta: {
+    title: '导购管理',
+  },
+  component: layout,
+    children: [{
+        path: 'manage',
+        meta: { title: "导购管理" },
+        component:() => import('@/pages/guiderManage/manage/index'),
+    },
+    {
+        path: 'material',
+        meta: { title: "导购素材" },
+        component:() => import('@/pages/guiderManage/material/index'),
+    }
+    ]
+}]
+
+export default Routes
\ No newline at end of file

src/router/index.js

+import Vue from 'vue';
+import Router from 'vue-router';
+import routerConfig from './menuRouter'
+let baseURL = ''
+Vue.use(Router);
+export default new Router({
+  base: baseURL,
+  mode: 'history',
+  routes: [
+    ...routerConfig,
+  ],
+});

src/router/menuRouter.js

+import manage from './guiderManage' 
+import miniprogram from './miniprogram'
+import operate from './operate'
+import points from './points'
+import publicStore from './publicStore'
+import statistics from './statistics'
+import task from './task'
+ const routerConfig = [
+  {
+    path: '/',
+    redirect: '/test',
+    meta: {
+      standalone: true,
+    },
+  },
+  {
+    path: '/test',
+    name: 'test',
+    component: () => import('@/pages/test'),
+    meta: {
+      standalone: true,
+    },
+    },
+    ...operate
+ ];
+ console.log(routerConfig)
+ export default routerConfig
\ No newline at end of file

src/router/miniprogram.js

+/**小程序管理 */
\ No newline at end of file

src/router/operate.js

+/**客户运营路由 */
+
+import layout from '@/pages/layout.vue'
+const operateRoutes = [{
+  path: '/operate/',
+  name: '客户运营',
+  meta: {
+    title: '客户运营',
+  },
+  component: layout,
+    children: [{
+        path: 'welcome',
+        meta: { title: "欢迎语" },
+        component:() => import('@/pages/operate/welcome/index'),
+    }]
+}]
+
+export default operateRoutes
\ No newline at end of file

src/router/points.js

+/**导购积分 */
\ No newline at end of file

src/router/publicStore.js

+/**素材库 */
\ No newline at end of file

src/router/statistics.js

+/**数据统计 */
\ No newline at end of file

src/router/task.js

+/**导购任务 */
\ No newline at end of file

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
+
+Vue.use(Vuex)
+
+const state = {
+ 
+};
+
+const getters = {
+};
+
+const mutations = {
+ 
+};
+
+const actions = {
+ 
+};
+
+export default new Vuex.Store({
+    state,
+    mutations,
+    getters,
+    actions,
+    plugins: [createPersistedState()],
+  })
\ No newline at end of file

vue.config.js

 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          // If you are using less-loader@5 please spread the lessOptions to options directly
+          modifyVars: {
+            'primary-color': '#16BFD5',
+            'link-color': '#16BFD5',
+            'border-radius-base': '2px',
+          },
+          javascriptEnabled: true,
+        },
+      },
+    },
+  },
 })