#4 feat:初始化活动微应用；perf: 首页排行榜图片处理

micro-juejin-activity/babel.config.js

@@ -1,3 +1,13 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "ant-design-vue",
+        libraryDirectory: "es",
+        style: true
+      }
+    ]
+  ]
 };

micro-juejin-activity/package.json

@@ -8,13 +8,18 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "ant-design-vue": "^1.6.5",
     "axios": "^0.20.0",
+    "babel-plugin-import": "^1.13.0",
     "compression-webpack-plugin": "^5.0.1",
     "core-js": "^3.6.5",
     "image-webpack-loader": "^6.0.0",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.1",
     "mockjs": "^1.1.0",
     "moment": "^2.27.0",
     "vue": "^2.6.11",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
@@ -44,4 +49,4 @@
       "git add"
     ]
   }
-}
+}

micro-juejin-activity/src/App.vue

@@ -23,6 +23,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  width: 500px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
 }
 </style>

micro-juejin-activity/src/layouts/BasicLayout.vue

@@ -1,26 +1,6 @@
 <template>
-  <div>
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/people">People</router-link>
-    </div>
-    <router-view />
-  </div>
+  <router-view />
 </template>
 <script>
 export default {};
 </script>
-<style lang="scss" scoped>
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>

micro-juejin-activity/src/main.js

@@ -5,6 +5,9 @@ import App from "./App.vue";
 import { routes } from "./router";
 import store from "@/store";
 import "@/filter";
+import "@/shared/initLazyLoad";
+
+import "@/shared/registAntd";
 
 const packageName = require("../package.json").name;
 

micro-juejin-activity/src/router/index.js

@@ -1,23 +1,14 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import Activity from "../views/Activity.vue";
 
 Vue.use(VueRouter);
 
 export const routes = [
   {
     path: "/",
-    name: "Home",
-    component: Home
-  },
-  {
-    path: "/people",
-    name: "People",
-    // 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: "people" */ "../views/People.vue")
+    name: "Activity",
+    component: Activity
   }
 ];
 

micro-juejin-activity/src/shared/initLazyLoad.js

@@ -0,0 +1,13 @@
+import Vue from "vue";
+import VueLazyload from "vue-lazyload";
+
+// eslint-disable-next-line no-unused-vars
+import errorPng from "../assets/404-5.png";
+import loading from "../assets/loading-4.gif";
+
+Vue.use(VueLazyload, {
+  preLoad: 1.3,
+  error: errorPng,
+  loading: loading,
+  attempt: 1
+});

micro-juejin-activity/src/shared/registAntd.js

@@ -0,0 +1,55 @@
+/*
+使用babel-plugin-import按需引入antd，具体配置在babel.config.js中。
+另外因为是定制主题的方式，还需要在vue.config.js中配置less的相关参数，
+其中javascriptEnabled的值必须为true，否则主题定制的样式无法生效
+ */
+
+/*
+ * 这里是全局按需引入
+ * 如果想要进一步提升性能
+ * 可以只在此注册频繁用到的组件
+ * 一些特定场景下才会用到的大型组件可以在具体业务组件中单独引入注册。
+ * 例如List组件在运行时接近2M大小，并且只有People页面中使用的话可以不在这里全局注册List组件，而是在People中去单独按需引入List组件
+ * */
+
+import Vue from "vue";
+// eslint-disable-next-line no-unused-vars
+import {
+  Button,
+  Empty,
+  notification,
+  message,
+  Avatar,
+  Icon,
+  Tooltip,
+  Layout,
+  Menu,
+  Dropdown,
+  Input
+} from "ant-design-vue";
+//
+Vue.prototype.$notification = notification;
+Vue.prototype.$message = message;
+
+/*需要注册的组件名字, 注册之前需要确保已经import这个组件*/
+const components = [
+  Button,
+  Empty,
+  notification,
+  message,
+  Avatar,
+  Icon,
+  Tooltip,
+  Layout,
+  Menu,
+  Dropdown,
+  Input
+];
+register(components);
+
+function register(components) {
+  components.forEach(comp => {
+    Vue.use(comp);
+  });
+  // Vue.component(Button.name, Button);
+}