1. init element lodash

package.json

@@ -8,13 +8,18 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.26.1",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.7",
+    "lodash": "^4.17.21",
+    "uniplat-sdk": "^0.1.350-private",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.178",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.15",
@@ -45,7 +50,8 @@
     },
     "ignorePatterns": [
       "node_modules",
-      "customer-service"
+      "customer-service",
+      "core-ui"
     ],
     "extends": [
       "plugin:vue/essential",
@@ -76,4 +82,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
\ No newline at end of file
+}

src/components/HelloWorld.vue

-<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-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</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 lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private 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/css/index.less

+@import '~@/core-ui/css/index.less';
\ No newline at end of file

src/global.d.ts

+import * as lodash from 'lodash';
+
+declare global {
+  const _: typeof lodash;
+}

src/installer/index.ts

+import {
+    Avatar,
+    Pagination,
+    Dialog,
+    Autocomplete,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    Input as EInput,
+    InputNumber,
+    Radio,
+    RadioGroup,
+    RadioButton,
+    Checkbox,
+    CheckboxButton,
+    CheckboxGroup,
+    Switch,
+    Select,
+    Option,
+    OptionGroup,
+    Button as EButton,
+    ButtonGroup,
+    Drawer,
+    Table,
+    TableColumn,
+    DatePicker,
+    Popover,
+    Tooltip,
+    Tabs,
+    TabPane,
+    Tree,
+    Upload,
+    Badge,
+    Timeline,
+    TimelineItem,
+    Loading,
+    Image,
+    Progress,
+    Cascader,
+    Carousel,
+    CarouselItem,
+    Collapse,
+    CollapseItem,
+    Form,
+    FormItem
+} from 'element-ui';
+import Vue, { VueConstructor } from 'vue';
+import './lodash';
+import 'element-ui/lib/theme-chalk/index.css';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const scrollbar = require('element-ui/lib/scrollbar');
+
+const eventInstaller = function install(Vue: VueConstructor) {
+    Vue.prototype.attachDocumentEvent = function(
+        this: Vue,
+        target: HTMLElement | Element | Document,
+        type: string,
+        listener: EventListenerOrEventListenerObject,
+        options?: boolean | AddEventListenerOptions,
+    ) {
+        target.addEventListener(type, listener, options);
+        this.$once("hook:beforeDestroy", () => target.removeEventListener(type, listener, options));
+    };
+};
+
+Vue.prototype.registerPostMessageEvent = function(callBack: () => void | Promise<void>) {
+    window.addEventListener("message", callBack, false);
+    this.$once("hook:beforeDestroy", () => window.removeEventListener("message", callBack, false));
+};
+
+/* eslint-disable */
+const locale = require('element-ui/lib/locale/lang/zh-CN.js').default;
+locale.el.pagination.goto = '';
+locale.el.pagination.pageClassifier = '';
+// locale.el.pagination.pagesize = '行';
+
+Vue.component('el-autocomplete', Autocomplete);
+Vue.component('el-scrollbar', scrollbar.default);
+
+Vue.use(Avatar);
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(EInput);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(EButton);
+Vue.use(ButtonGroup);
+Vue.use(Popover);
+Vue.use(DatePicker);
+Vue.use(Tooltip);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Upload);
+Vue.use(Badge);
+Vue.use(Timeline);
+Vue.use(TimelineItem);
+Vue.use(Drawer);
+Vue.use(Image);
+Vue.use(Tree);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(Progress).use(Cascader).use(Carousel).use(CarouselItem).use(Collapse).use(CollapseItem).use(Form).use(FormItem);
+
+// element ui 的loading注入稍有不同
+Vue.use(Loading.directive);
+Vue.use(eventInstaller);

src/installer/lodash.ts

+import _ from 'lodash';
+
+declare module 'lodash' {
+    interface LoDashStatic {
+        isEmail: (email: string) => boolean;
+        isPhone: (phone: string) => boolean;
+        isIdentityNumber: (value: string) => boolean;
+        isFemale: (identityNumber: string) => boolean;
+        isMoney: (value: string) => boolean;
+        containsIgnoreCase(source: string, target: string): boolean;
+    }
+}
+
+const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
+
+_.mixin(_, {
+    isEmail: (email: string) => {
+        return /^([0-9a-zA-Z]+[_.0-9a-zA-Z-]+)@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2,3})$/.test(email);
+    },
+    isPhone: (phone: string) => {
+        return /^1[0-9]{10}$/.test(phone);
+    },
+    isIdentityNumber: (value: string) => {
+        const v = value + '';
+        const primary = /^(\d{18}|\d{15}|\d{17}[x|X])$/.test(value);
+        if (primary) {
+            const code = v.substring(17).toUpperCase();
+            let sum = 0;
+            for (let i = 0; i < 17; i++) {
+                const s = v.charAt(i);
+                if (s) {
+                    sum += +s * factor[i];
+                }
+            }
+            if (parity[sum % 11] === +code || parity[sum % 11] === code) {
+                return true;
+            }
+        }
+        return false;
+    },
+    isMoney: (value: string) => {
+        return /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value);
+    },
+    containsIgnoreCase: (source: string, target: string) => {
+        if (target && source) {
+            return source.toLowerCase().indexOf(target.toLowerCase()) > -1;
+        }
+        return false;
+    }
+});
+
+_.mixin(_, {
+    isFemale: (value: string) => {
+        return _.isIdentityNumber(value) && +(value[value.length - 2]) % 2 === 0;
+    },
+});

src/main.ts

 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
+import '@/css/index.less';
+import '@/installer';
 
 Vue.config.productionTip = false;
 

src/views/pages/aside-panels/aside-panels.vue

 <template>
-    <div>asidepanels</div>
+    <div>
+        <el-collapse>
+            <el-collapse-item
+                :name="item.title"
+                v-for="(item, index) in items"
+                :key="'m' + index"
+            >
+                <template slot="title">
+                    {{ item.title }}
+                </template>
+            </el-collapse-item>
+        </el-collapse>
+    </div>
 </template>
 
 <script lang="ts">
     import { Component, Vue } from "vue-property-decorator";
 
     @Component({ components: {} })
-    export default class Asidepanels extends Vue {}
+    export default class Asidepanels extends Vue {
+        private items = [
+            {
+                title: "`132",
+            },
+        ];
+    }
 </script>
 
 <style lang="less" scoped>

vue.config.js

+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const webpack = require("webpack");
+
 module.exports = {
     outputDir: 'production',
     productionSourceMap: true,
@@ -11,5 +14,9 @@ module.exports = {
         port: 8086,
         https: false,
         hotOnly: false,
+    },
+
+    chainWebpack: config => {
+        config.plugin('lodash').use(webpack.ProvidePlugin, [{ _: 'lodash' }]);
     }
 }
\ No newline at end of file