1

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "plugin:prettier/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",
+  },
+};

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,24 @@
+# vue3-js-example
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

cert/localhost+1-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDF9+li7yoLBKBh
+khOmhgPUl5DXN0DaipbtPs4ban1HHBeuGPU1rBT8uqPQIa1032yboIIA43Lc83lz
+HbVIU/027EKQrwm/kHBk9cv/2/B0bsCj6R5xto7PNGX9s9oO8d64jWdwoij8h8/0
+ohnvFQDwRcpG9hJetaKZnXHCKwd4Ch0x6iJ3/0b2Fm16XapRJciqGf064gbwUpnD
+i+tCDVFSxqxvL9z7br7kPRYmYgKo7/+lM5SR0069/fG+mgTESDM2cOeEqh6tXuhI
+QGCjxNXN89zL/kQKzIOsJZxhGiwOjYKSJBP5ubkNIbE6Q27aYF5Ck0KYFDyLekzV
+xsbL97uRAgMBAAECggEBAKDCX8iSVH7cA+0XtVNdspCZf+n0mXqeXk9L2A0VXaQ4
+INakt8Mc+XH9kfb60iN9J3H9VnSoPudD49TiRAr3AUHve2KIcY8ZGNwzabRdAxdZ
+tJ+mN625xKBoeYYa3bGTIfyV/3DMjiH7m5iZZhvq33c+BTO4sVQthVvfKbi2Pntv
+tX3b7SsOQrj69BGbsYlIn3Wxt0T/rD2YBwjyvLQNeEGo90jRw2oQzhf15e14AkT1
+U6nwbd/vRfga4/QjNk0TKq1uxy9rm05Sf9X5Tez4zc0y85c4GIl8tUZzldndbX+U
+xrn8+l0u8kOdpqWEURun570L/MusBwEhe0sIODpxTi0CgYEA3pnYeTUcGciR25//
+CEfzoESeKqeGgj7nPAAyDMNz3jEXeiqs39RfkFnVM45OmO8qDz5bCEpuw3I72Aaq
+/qCvirRB2uKQtYvJG3/F5mGfGWwdoCA8NJf6TpALzVFeiNixH052Wunm/yY0XkTY
+1sQWg9htDJF+WVj+zNOY33L2i5cCgYEA46vsh748djTxFJ0j7V2SpipSIH/NyUDN
+y/GDDAyYHGkgRI/xI5tmhF4LjnlvOBQfVy12ljwGeCTuFyoBL4QWxD3tlnAlKeA8
+7bx9joDwDcq420uCkL357CuUwQ+wNhfeBZM2ts4UQUG421IRZzC8Sx2dG7hCkdNA
+FfjqwCBCdxcCgYA1QFyW8much2zNO4NJOd1AU+n6jkURV3b91ZYjk4ZeeyQAp8Df
+cvDBmZv1T2/iCiTnrKUeYKAKxYMndMDnVQ1pgyHV+SlhJOWhXHm9WVE0Rbb4nX2J
+n2nT7YXFQlf5KM2GjcCmkxodo8gXXST6i8JPHDFKNmwhd7bMzTnfCqOMVQKBgQCF
+ZjcxUkYa/OpFKc3jRvCmbCWy5S+uvEnZNamTZc26194QTkb8lhF7fZ9H299O/Htg
+mULixEkGHJ1k9Te8n6i3U5Hik9MytjD9G3R2Cxac/itSUuwt4yKNPvvqI0ccat+s
+ZJWqhxVXJyspVuzbibLKUI+9rjlTOHRUa4UhDcXkAQKBgQCRC/VftW6KZ1ew3/2R
+heRJG/92huDPhKCYP2t5Kn95LzBadjy8SChYSO0ZZi3VgDW4mGQwS8lO2oFyQ4k0
+WTga7AP/RY9nSllIVCaiXPM8M/5gCIQSyHCGfTy8/WNY7lh48xE7tH1TW2yUswLO
+1qGYjMSHu8loY/Fv0cMcCUbubQ==
+-----END PRIVATE KEY-----

cert/localhost+1.pem

@@ -0,0 +1,26 @@
+-----BEGIN CERTIFICATE-----
+MIIEYjCCAsqgAwIBAgIRANyulE+/rGIxRkKsjpB0bE8wDQYJKoZIhvcNAQELBQAw
+gZMxHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTE0MDIGA1UECwwrd2Fu
+Z2hvbmd0YW9AQ04wMDE0MDEwMDU0TS5sb2NhbCAo546L5rSq5rabKTE7MDkGA1UE
+AwwybWtjZXJ0IHdhbmdob25ndGFvQENOMDAxNDAxMDA1NE0ubG9jYWwgKOeOi+a0
+qua2mykwHhcNMjExMjE4MDY0MzE3WhcNMjQwMzE4MDY0MzE3WjBfMScwJQYDVQQK
+Ex5ta2NlcnQgZGV2ZWxvcG1lbnQgY2VydGlmaWNhdGUxNDAyBgNVBAsMK3dhbmdo
+b25ndGFvQENOMDAxNDAxMDA1NE0ubG9jYWwgKOeOi+a0qua2mykwggEiMA0GCSqG
+SIb3DQEBAQUAA4IBDwAwggEKAoIBAQDF9+li7yoLBKBhkhOmhgPUl5DXN0Daipbt
+Ps4ban1HHBeuGPU1rBT8uqPQIa1032yboIIA43Lc83lzHbVIU/027EKQrwm/kHBk
+9cv/2/B0bsCj6R5xto7PNGX9s9oO8d64jWdwoij8h8/0ohnvFQDwRcpG9hJetaKZ
+nXHCKwd4Ch0x6iJ3/0b2Fm16XapRJciqGf064gbwUpnDi+tCDVFSxqxvL9z7br7k
+PRYmYgKo7/+lM5SR0069/fG+mgTESDM2cOeEqh6tXuhIQGCjxNXN89zL/kQKzIOs
+JZxhGiwOjYKSJBP5ubkNIbE6Q27aYF5Ck0KYFDyLekzVxsbL97uRAgMBAAGjZDBi
+MA4GA1UdDwEB/wQEAwIFoDATBgNVHSUEDDAKBggrBgEFBQcDATAfBgNVHSMEGDAW
+gBRDPwjEh5o/G8bBMs+CXkrGb4tmUDAaBgNVHREEEzARgglsb2NhbGhvc3SHBAqY
+PiIwDQYJKoZIhvcNAQELBQADggGBACnuW6z4+VlKgblCEVUXT7+gp06h8SJBG5rX
+KfjCgCBgx8MhIm2ChvDT5PhWtwtK5aHLIinCHfJ3KzdBzPCmxQ/7r1PtxTFfRuci
+WUeO0EfrtP8sGHTeT9fXXs+MJv9vvpzTwHFpZLd7rC2s1lBH6fO6LdPmDBJbzNmP
+kRi0CvXzLyOXAifu3ZC+93gQsca33J+zN6iH2JNRoDri9k0Nq/5HFT6PWQ+/YBB3
+Bh0cfTgltFFF2KMp7qx8xxohgBF8S+ad8D5zHjQ4fi/xIoT4J/Lk9PAVDltLFX9h
+bKZg09Tz46Pj2kza2y2vYEDwaQjjxnfLFh1a2Nqf9al7AmZDvsVWnnLOvRrJQkyr
+tYhdLcylIpXiO5U3T5kA/KSGbFLGuu3jEzTDZ8Jru/Ltj0I1PN41hKP+uAwp/akz
+OqFJJDQjkKXAtptMxUJ7cQQazmooT4shvPbl9os/zIJdVSalNSWusHvSpim01//t
+ZKfxS/pm7601PvjqWRLgQ2ERqPRi5g==
+-----END CERTIFICATE-----

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "vue3-js-example",
+  "version": "1.0.0",
+  "chineseName": "vue3-js案例",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "dayjs": "^1.11.7",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "prettier": "^2.4.1"
+  }
+}

public/LayaAir.LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 layabox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

public/OSS-list.txt

@@ -0,0 +1,7 @@
+开源软件名称和版本号
+开源许可证
+开源软件主页或获取链接，其中，下述各开源软件的copyright和license详情请见各开源软件对应的链接
+
+LayaAir==2.13.2
+MIT License
+https://github.com/layabox/LayaAir/blob/LayaAir_2.13.2/LICENSE

public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="">
+  <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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
+    />
+    <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="<%= htmlWebpackPlugin.options.rootId %>"></div>
+    <%= htmlWebpackPlugin.options.customInjectScript %>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/components/HelloWorld.vue

@@ -0,0 +1,130 @@
+<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-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</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 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>

src/main.js

@@ -0,0 +1,99 @@
+import "./public-path";
+import { createApp } from "vue";
+import { createRouter, createMemoryHistory } from "vue-router";
+import App from "./App.vue";
+import routes from "./router";
+import store from "./store";
+import packageJson from "../package.json";
+
+const packageName = packageJson.name;
+const rootId = packageName + "__id";
+
+let instance = null;
+let router = null;
+let history = null;
+
+function render(props = {}) {
+  const { container } = props;
+
+  history = createMemoryHistory(
+    window.__POWERED_BY_QIANKUN__ ? `/${packageName}` : "/"
+  );
+
+  router = createRouter({
+    history,
+    routes,
+  });
+
+  instance = createApp(App);
+  instance.use(router);
+  instance.use(store);
+  instance.mount(
+    container
+      ? container.querySelector(`#${rootId}`)
+      : document.getElementById(rootId)
+  );
+}
+
+if (!window.__POWERED_BY_QIANKUN__) {
+  render();
+}
+
+/**
+ * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
+ * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
+ */
+export async function bootstrap(props) {
+  console.log(`[${packageName}] app bootstraped`, props);
+}
+
+/**
+ * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
+ */
+export async function mount(props) {
+  console.log(`[${packageName}] app mount`, props);
+
+  // templateCode: 子应用的唯一标识，格式: `PoiID_${poiId}_TemplateCode_${templateCode}`
+  // appName: 子应用的名称
+  // entry: 子应用的地址，带版本号，可以当成 baseUrl 使用
+  // App3DNode: 子应用使用的节点，所有加载3d资源都要放入该节点下
+  // AppCameraNode: 主应用分配的camera节点，在主摄像机下的空节点
+  // SenseNode: 主应用分配的UI节点
+  // PoiConfig: 子应用 POI 配置信息
+  // SubAppInfo: 子应用的配置，只有基本信息。通用配置、子应用配置、运营配置和奖品配置都需要额外获取
+  // customProps: 自定义传参
+  // const {
+  //   appName,
+  //   templateCode,
+  //   entry,
+  //   App3DNode,
+  //   AppCameraNode,
+  //   SenseNode,
+  //   PoiConfig,
+  //   SubAppInfo,
+  //   customProps,
+  // } = props;
+
+  render(props);
+}
+
+/**
+ * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
+ */
+export async function unmount() {
+  console.log(`[${packageName}] app unmount`);
+  instance.unmount();
+  instance._container.innerHTML = "";
+  instance = null;
+  router = null;
+  history.destroy();
+}
+
+/**
+ * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 该生命周期钩子，目前仅仅用于设置子应用的 激活/未激活 状态
+ */
+export async function update(customProps) {
+  // 假如没有相关需求，该生命周期可以删除
+  console.log(`[${packageName}] app update`, customProps);
+}

src/public-path.js

@@ -0,0 +1,4 @@
+if (window.__POWERED_BY_QIANKUN__) {
+  // eslint-disable-next-line no-undef
+  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
+}

src/router/index.js

@@ -0,0 +1,20 @@
+import HomeView from "../views/HomeView.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: HomeView,
+  },
+  {
+    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: () =>
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+  },
+];
+
+export default routes;

src/store/index.js

@@ -0,0 +1,9 @@
+import { createStore } from "vuex";
+
+export default createStore({
+  state: {},
+  getters: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+});

src/views/AboutView.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/HomeView.vue

@@ -0,0 +1,18 @@
+<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";
+
+export default {
+  name: "HomeView",
+  components: {
+    HelloWorld,
+  },
+};
+</script>

vue.config.js

@@ -0,0 +1,42 @@
+const { defineConfig } = require("@vue/cli-service");
+const dayjs = require("dayjs");
+const { name, version, chineseName } = require("./package.json");
+
+const buildTag = `${dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss")}`;
+const injectScript = `<script>const aVersionInfo = { name: '${name}', chineseName: '${chineseName}', version: '${version}', buildDate:'${buildTag}' }; if (!window.versionInfo) {window.versionInfo = {};} window.versionInfo['${name}'] = aVersionInfo;</script>`;
+const rootId = name + "__id";
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  publicPath: "./",
+  devServer: {
+    host: "0.0.0.0",
+    https: {
+      key: "./cert/localhost+1-key.pem",
+      cert: "./cert/localhost+1.pem",
+    },
+    hot: true,
+    port: 8332,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  configureWebpack: {
+    output: {
+      library: name,
+      libraryTarget: "umd", // 把微应用打包成 umd 库格式
+      chunkLoadingGlobal: `webpackJsonp_${name}`, // webpack4 => jsonpFunction
+    },
+    plugins: [],
+  },
+  chainWebpack: (config) => {
+    config.plugin("html").tap((args) => {
+      if (args && args.length > 0) {
+        args[0].rootId = rootId;
+        args[0].customInjectScript = injectScript;
+      }
+
+      return args;
+    });
+  },
+});