#5 init:micro-juejin-tryVite初始化

ChanningHan · Sep 20, 2020 · cfc4053 · cfc4053
1 parent 4d7d606
commit cfc4053
Show file tree

Hide file tree

Showing 12 changed files with 2,190 additions and 0 deletions.
diff --git a/micro-juejin-main/src/shared/microApps.js b/micro-juejin-main/src/shared/microApps.js
@@ -62,6 +62,15 @@ const apps = [
     $meta: {
       title: "活动"
     }
+  },
+  {
+    name: "micro-juejin-tryVite",
+    entry: `//${prdHost || "localhost"}:3000`,
+    container: "#subApp",
+    activeRule: "/micro-juejin-tryVite",
+    $meta: {
+      title: "tryVite"
+    }
   }
 ];
 

diff --git a/micro-juejin-tryVite/.gitignore b/micro-juejin-tryVite/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.local
diff --git a/micro-juejin-tryVite/index.html b/micro-juejin-tryVite/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
diff --git a/micro-juejin-tryVite/package.json b/micro-juejin-tryVite/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "micro-juejin-tryVite",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "vite": "^1.0.0-rc.1",
+    "@vue/compiler-sfc": "^3.0.0-rc.1"
+  }
+}
diff --git a/micro-juejin-tryVite/public/favicon.ico b/micro-juejin-tryVite/public/favicon.ico
diff --git a/micro-juejin-tryVite/src/App.vue b/micro-juejin-tryVite/src/App.vue
@@ -0,0 +1,15 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3.0 + Vite" />
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
diff --git a/micro-juejin-tryVite/src/assets/logo.png b/micro-juejin-tryVite/src/assets/logo.png
diff --git a/micro-juejin-tryVite/src/components/HelloWorld.vue b/micro-juejin-tryVite/src/components/HelloWorld.vue
@@ -0,0 +1,19 @@
+<template>
+  <h1>{{ msg }}</h1>
+  <button @click="count++">count is: {{ count }}</button>
+  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
diff --git a/micro-juejin-tryVite/src/index.css b/micro-juejin-tryVite/src/index.css
@@ -0,0 +1,8 @@
+#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;
+}
diff --git a/micro-juejin-tryVite/src/main.js b/micro-juejin-tryVite/src/main.js
@@ -0,0 +1,39 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import "./index.css"
+
+// import "./public-path";
+
+
+let vm = null;
+
+
+async function VueRender(props = {}) {
+    const { container } = props;
+    vm = await createApp(App).mount(container ? container.querySelector("#app") : "#app")
+    return Promise.resolve()
+}
+
+/*如果不作为微应用加载则直接调用VueRender*/
+if (!window.__POWERED_BY_QIANKUN__) {
+    VueRender().then(()=>{
+        console.log('作为非微应用加载')
+    });
+}
+
+(global => {
+    global['purehtml'] = {
+        bootstrap: () => {
+            console.log('Vite App  bootstrap');
+            return Promise.resolve();
+        },
+        mount: (props) => {
+            console.log('Vite App mount');
+            return VueRender(props);
+        },
+        unmount: () => {
+            console.log('Vite App unmount');
+            return Promise.resolve();
+        },
+    };
+})(window);
diff --git a/micro-juejin-tryVite/vite.config.js b/micro-juejin-tryVite/vite.config.js
@@ -0,0 +1,9 @@
+const port = 8076
+
+export default  {
+    port,
+    base: '//localhost:3000/',
+    rollupOutputOptions:{
+        // name:'try-vite'
+    }
+}