feat: first commit

6 years ago · 37b63f1c0e
18 changed files with 7377 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,41 @@
+# 微前端、微应用
+
+## 作为单独项目开始
+
+```bash
+yarn serve
+```
+
+## 接入主服务
+
+将下面的路由接入主服务中：
+
+```js
+import { RouteView } from '@/layouts'
+// 测试微前端
+export default {
+  path: '/testMicro/index',
+  component: RouteView,
+  name: 'testMicro',
+  redirect: '/testMicro',
+  meta: { title: '测试微前端', keepAlive: false },
+  children: [
+    {
+      path: '/testMicro',
+      name: 'testMicroHome',
+      meta: { title: '测试微前端home', keepAlive: true, icon: 'home', hiddenHeaderContent: true }
+    },
+    {
+      path: '/testMicro/about',
+      name: 'testMicroAbout',
+      meta: { title: '测试微前端about', keepAlive: true, icon: 'home', hiddenHeaderContent: true }
+    },
+  ]
+}
+```
+
+## 编译
+
+```bash
+yarn build
+```
--- a/package.json
+++ b/package.json
@ -0,0 +1,23 @@
+{
+  "name": "test-micro",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "ant-design-vue": "^1.5.6",
+    "axios": "^0.19.2",
+    "utils": "^1.5.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.6"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-router": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,32 @@
+<template>
+  <div id="app">
+    <!-- <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div> -->
+    <router-view :key="(new Date()).getTime()" />
+  </div>
+</template>
+
+<style scoped lang="less">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,10 @@
+import { axios } from '@/utils/request'
+
+// 测试接口
+export function test (parameter) {
+  return axios({
+    url: '/department/getDepartmentList',
+    method: 'get',
+    params: parameter
+  })
+}
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,57 @@
+<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-router" target="_blank" rel="noopener">router</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 lang="less">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,95 @@
+import Vue from 'vue'
+
+import "./public-path";
+
+import VueRouter from 'vue-router'
+import App from './App.vue'
+import routes from './router'
+
+Vue.use(VueRouter)
+Vue.config.productionTip = false
+
+let instance = null;
+let router = null;
+
+/**
+ * 渲染函数
+ * 两种情况：主应用生命周期钩子中运行 / 微应用单独启动时运行
+ */
+function render(props = {}) {
+  const { container } = props;
+  
+  // 在 render 中创建 VueRouter，可以保证在卸载微应用时，移除 location 事件监听，防止事件污染
+  router = new VueRouter({
+    // 运行在主应用中时，添加路由命名空间 /vue
+    base: window.__POWERED_BY_QIANKUN__ ? "/testMicro" : process.env.BASE_URL,
+    mode: "history",
+    routes,
+  });
+
+  // 挂载应用
+  instance = new Vue({
+    router,
+    render: h => h(App),
+  }).$mount(container ? container.querySelector('#app') : '#app');
+}
+
+// 独立运行时，直接挂载应用
+if (!window.__POWERED_BY_QIANKUN__) {
+  render()
+}
+
+function storeTest(props) {
+  props.onGlobalStateChange &&
+    props.onGlobalStateChange(
+      (value, prev) => {
+        console.log(`[qiankun testMicro]: [onGlobalStateChange - ${props.name}]:`, value, prev)
+        localStorage.setItem('pro__Access-Token', JSON.stringify((value || {}).token || {}))
+      },
+      true,
+    );
+  // props.setGlobalState &&
+  //   props.setGlobalState({
+  //     ignore: props.name,
+  //     user: {
+  //       name: props.name,
+  //     },
+  //   });
+}
+
+/**
+ * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
+ * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
+ */
+export async function bootstrap() {
+  console.log('[qiankun testMicro]: vue app bootstraped');
+}
+
+
+/**
+ * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
+ */
+export async function mount(props) {
+  console.log('[qiankun testMicro]: props from main framework', props);
+
+  props.onGlobalStateChange((state, prev) => {
+    // state: 变更后的状态; prev 变更前的状态
+    console.log("[qiankun testMicro]: [onGlobalStateChange]", state, prev);
+  });
+
+  // props.setGlobalState(state);
+
+  storeTest(props);
+  render(props);
+}
+
+
+/**
+ * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
+ */
+export async function unmount() {
+  console.log("[qiankun testMicro]: vue app unmount");
+  instance.$destroy();
+  instance = null;
+  router = null;
+}
--- a/src/public-path.js
+++ b/src/public-path.js
@ -0,0 +1,5 @@
+if (window.__POWERED_BY_QIANKUN__) {
+  // 动态设置 webpack publicPath，防止资源加载出错
+  // eslint-disable-next-line no-undef
+  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,25 @@
+
+import Home from '../views/Home.vue'
+
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: function () {
+      // /* webpackChunkName: "about" */ 
+      return import('../views/About.vue')
+    }
+  }
+]
+
+
+export default routes
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,76 @@
+import Vue from 'vue'
+import axios from 'axios'
+import notification from 'ant-design-vue/es/notification'
+import { VueAxios } from 'utils'
+// import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: process.env.NODE_ENV === 'production' ? 'http://api-test.qniao.cn/user-centre' : 'http://47.106.79.88:9000/user-centre',
+  timeout: 15000 // 请求超时时间
+})
+
+const err = (error) => {
+  console.log(error)
+  if (error.response) {
+    const data = error.response
+    // const token = Vue.ls.get(ACCESS_TOKEN)
+    // const token = JSON.parse(localStorage.getItem('pro__Access-Token') || '{}').value
+    const token = localStorage.getItem('pro__Access-Token')
+    console.log('token get from testmicro: ', token)
+    if (error.response.status === 403) {
+      notification.error({
+        message: '您暂时没有权限！',
+        description: data.message
+      })
+    }
+    if (error.response.status === 500) {
+      notification.error({
+        message: '服务器错误！',
+        description: data.message
+      })
+    }
+    if (error.response.status === 401 && !(data.result && data.code === 666)) {
+      notification.error({
+        message: '登录已失效',
+        description: '会话失效，请重新登录！'
+      })
+      if (token) {
+        // Vue.ls.remove(ACCESS_TOKEN)
+        localStorage.removeItem('pro__Access-Token')
+        window.location = service.baseURL
+      }
+    }
+  }
+  return Promise.reject(error)
+}
+
+// request interceptor
+service.interceptors.request.use(config => {
+  // const token = Vue.ls.get(ACCESS_TOKEN)
+  // const token = JSON.parse(localStorage.getItem('pro__Access-Token') || '{}').value
+  const token = localStorage.getItem('pro__Access-Token')
+  console.log('token get from testmicro: ', token)
+  const _token = (JSON.parse(token) || {}).value
+  if (_token) {
+    config.headers['user-token'] = _token // 让每个请求携带自定义 token 请根据实际情况自行修改
+  }
+  return config
+}, err)
+
+// response interceptor
+service.interceptors.response.use((response) => {
+  return response.data
+}, err)
+
+const installer = {
+  vm: {},
+  install (Vue) {
+    Vue.use(VueAxios, service)
+  }
+}
+
+export {
+  installer as VueAxios,
+  service as axios
+}
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+import { test } from '@/api'
+
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld
+  },
+  created() {
+    test()
+  }
+}
+</script>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,52 @@
+const path = require('path');
+const { name } = require('./package');
+
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+const port = 7101; // dev port
+
+
+module.exports = {
+  /**
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  outputDir: 'dist',
+  assetsDir: 'static',
+  filenameHashing: true,
+  // tweak internal webpack configuration.
+  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
+  devServer: {
+    // host: '0.0.0.0',
+    hot: true,
+    disableHostCheck: true,
+    port,
+    overlay: {
+      warnings: false,
+      errors: true,
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
+  // 自定义webpack配置
+  configureWebpack: {
+    devtool: 'source-map',
+    resolve: {
+      alias: {
+        '@': resolve('src'),
+      },
+    },
+    output: {
+      // 把子应用打包成 umd 库格式
+      library: `${name}-[name]`,
+      libraryTarget: 'umd',
+      jsonpFunction: `webpackJsonp_${name}`,
+    },
+  },
+};
--- a/yarn.lock
+++ b/yarn.lock