5 years ago · e86c9e1f03
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,2 @@
 
				+> 1%
			
 
				+last 2 versions
			
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,3 @@
 
				+# 本地开发模式
			
 
				+# 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
			
 
				+VUE_APP_TITLE=vue-module
			
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,3 @@
 
				+# 生产模式
			
 
				+# 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
			
 
				+VUE_APP_TITLE=vue-module
			
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,14 @@
 
				+module.exports = {
			
 
				+  root: true,
			
 
				+  env: {
			
 
				+    node: true
			
 
				+  },
			
 
				+  extends: ['plugin:vue/essential'],
			
 
				+  rules: {
			
 
				+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
			
 
				+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
			
 
				+  },
			
 
				+  parserOptions: {
			
 
				+    parser: 'babel-eslint'
			
 
				+  }
			
 
				+}
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,20 @@
 
				+.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
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
 
				+{
			
 
				+  "prettier.semi": false,
			
 
				+  "prettier.singleQuote": true
			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
 
				+# vue-module
			
 
				+
			
 
				+适用于[vue-module-loader](https://github.com/mqhe2007/vue-module-loader)的微前端模块工程
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,3 @@
 
				+module.exports = {
			
 
				+  presets: ["@vue/cli-plugin-babel/preset"]
			
 
				+};
			
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
 
				+{
			
 
				+  "name": "test-vmc",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve -mode development",
			
 
				+    "build:app": "vue-cli-service build -mode production",
			
 
				+    "build:module": "vue-cli-service build --target lib src/module.js"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.3.2",
			
 
				+    "vue": "^2.6.10",
			
 
				+    "vue-module-loader": "^1.0.3",
			
 
				+    "vue-router": "^3.1.3",
			
 
				+    "vuex": "^3.0.1"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "^4.0.0",
			
 
				+    "@vue/cli-plugin-eslint": "^4.0.0",
			
 
				+    "@vue/cli-plugin-router": "^4.0.0",
			
 
				+    "@vue/cli-plugin-vuex": "^4.0.0",
			
 
				+    "@vue/cli-service": "^4.0.0",
			
 
				+    "@vue/eslint-config-prettier": "^5.0.0",
			
 
				+    "babel-eslint": "^10.0.3",
			
 
				+    "eslint": "^5.16.0",
			
 
				+    "eslint-plugin-prettier": "^3.1.1",
			
 
				+    "eslint-plugin-vue": "^5.0.0",
			
 
				+    "prettier": "^1.18.2",
			
 
				+    "stylus": "^0.54.7",
			
 
				+    "stylus-loader": "^3.0.2",
			
 
				+    "vue-template-compiler": "^2.6.10"
			
 
				+  },
			
 
				+  "description": "test",
			
 
				+  "author": "ln"
			
 
				+}
			
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  plugins: {
			
 
				+    autoprefixer: {}
			
 
				+  }
			
 
				+};
			
--- 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>admincraft-module</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but admincraft-module 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,28 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <div id="nav">
			
 
				+      <router-link to="/">Home</router-link> |
			
 
				+      <router-link to="/about">About</router-link>
			
 
				+    </div>
			
 
				+    <router-view />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style lang="stylus">
			
 
				+#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/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,14 @@
 
				+<template>
			
 
				+  <div class="hello">
			
 
				+    <h1>{{ msg }}</h1>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'HelloWorld',
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -0,0 +1,17 @@
 
				+<template>
			
 
				+  <div class="logo">
			
 
				+    <img class="img" alt="Vue logo"
			
 
				+         src="../assets/logo.png">
			
 
				+         
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'logo'
			
 
				+}
			
 
				+</script>
			
 
				+<style>
			
 
				+  .img{
			
 
				+    border: 1px solid #f00;
			
 
				+  }
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,14 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import store from './store'
			
 
				+import vueModuleLoader from 'vue-module-loader'
			
 
				+import localModule from './module'
			
 
				+Vue.use(vueModuleLoader, { store })
			
 
				+const app = new Vue({
			
 
				+  router,
			
 
				+  store,
			
 
				+  render: h => h(App)
			
 
				+})
			
 
				+app.$moduleLoader(localModule)
			
 
				+app.$mount('#app')
			
--- a/src/module.js
+++ b/src/module.js
@@ -0,0 +1,12 @@
 
				+import Logo from './components/Logo.vue'
			
 
				+import routes from './router/routes'
			
 
				+import storeModule from './store/store-module'
			
 
				+export default function(Vue) {
			
 
				+  Vue.config.productionTip = false
			
 
				+  this.$router.addRoutes(routes)
			
 
				+  this.$store.registerModule('main', storeModule)
			
 
				+  this.$eventBus.on('visitedAbout', () => {
			
 
				+    alert('用户访问了about页面99。')
			
 
				+  })
			
 
				+  this.$dynamicComponent.create(Logo)
			
 
				+}
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,19 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+import Home from '../views/Home.vue'
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'home',
			
 
				+    component: Home
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -0,0 +1,8 @@
 
				+export default [
			
 
				+  {
			
 
				+    path: '/about',
			
 
				+    name: 'about',
			
 
				+    component: () =>
			
 
				+      import(/* webpackChunkName: "about" */ '../views/About.vue')
			
 
				+  }
			
 
				+]
			
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,11 @@
 
				+import Vue from 'vue'
			
 
				+import Vuex from 'vuex'
			
 
				+
			
 
				+Vue.use(Vuex)
			
 
				+
			
 
				+export default new Vuex.Store({
			
 
				+  state: {},
			
 
				+  mutations: {},
			
 
				+  actions: {},
			
 
				+  modules: {}
			
 
				+})
			
--- a/src/store/store-module.js
+++ b/src/store/store-module.js
@@ -0,0 +1,7 @@
 
				+export default {
			
 
				+  namespaced: true,
			
 
				+  state: {
			
 
				+    title: 'vue-module'
			
 
				+  },
			
 
				+  mutations: {}
			
 
				+}
			
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -0,0 +1,16 @@
 
				+<template>
			
 
				+  <div class="about">
			
 
				+    <h1>关于页面</h1>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'about',
			
 
				+  mounted() {
			
 
				+    setTimeout(() => {
			
 
				+      this.$eventBus.emit('visitedAbout')
			
 
				+    }, 500)
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,25 @@
 
				+<template>
			
 
				+  <div class="home">
			
 
				+    <h1>{{title}}</h1>
			
 
				+    <!-- 加载动态组件 -->
			
 
				+    <component :is="$store.state.dynamicComponent.GLOBAL.logo"></component>
			
 
				+    <HelloWorld msg="Vue + vue-module-loader = Micro Front-end" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// @ is an alias to /src
			
 
				+import HelloWorld from '@/components/HelloWorld.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'home',
			
 
				+  components: {
			
 
				+    HelloWorld
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      title: process.env.VUE_APP_TITLE
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,8 @@
 
				+module.exports = {
			
 
				+  publicPath: './', // 这个值被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
			
 
				+  configureWebpack: {
			
 
				+    resolve: {
			
 
				+      symlinks: false
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/yarn.lock
+++ b/yarn.lock