init

.eslintrc.js

@@ -1,20 +1,45 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint"
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
-  }
-};
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'prettier/prettier': 'error',
+    'import/extensions': 0,
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/name-property-casing': ['error', 'PascalCase'],
+    'vue/no-v-html': 'off',
+    semi: 0,
+    'import/no-cycle': 0,
+    'max-len': 0,
+    'no-underscore-dangle': 0,
+    'prefer-destructuring': [
+      'error',
+      {
+        object: true,
+        array: false,
+      },
+    ],
+    'no-script-url': 0,
+    'no-param-reassign': [
+      'error',
+      {
+        props: false,
+      },
+    ],
+    camelcase: 'off',
+  },
+}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/lib
 
 
 # local env files

.npmignore

@@ -0,0 +1,9 @@
+# 忽略目录
+example/
+packages/
+public/
+
+# 忽略指定文件
+vue.config.js
+babel.config.js
+*.map

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+public
+dist

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "bracketSpacing": true
+}

babel.config.js

@@ -1,3 +1,14 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};
+  presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'element-plus',
+        customStyleName: name => {
+          return `element-plus/lib/theme-chalk/${name}.css`
+        },
+      },
+    ],
+  ],
+}

example/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <emqx-button>123</emqx-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'App',
+})
+</script>
+
+<style lang="scss"></style>

example/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import UI from '../packages/index'
+
+console.log(UI)
+
+createApp(App)
+  .use(UI)
+  .mount('#app')

package.json

@@ -1,14 +1,20 @@
 {
-  "name": "emqx-element-ui",
+  "name": "@emqx/emqx-element-ui",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
+  "description": "EMQ X UI Libray",
+  "main": "lib/emqx-element-ui.umd.min.js",
+  "keyword": "EMQ X",
+  "author": "EMQ X Frontend Team",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name emqx-element-ui --dest lib packages/index.ts"
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "element-plus": "^1.0.2-beta.35",
     "vue": "^3.0.0"
   },
   "devDependencies": {
@@ -21,6 +27,7 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
+    "babel-plugin-import": "^1.13.3",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-0",
@@ -38,5 +45,6 @@
       "vue-cli-service lint",
       "git add"
     ]
-  }
+  },
+  "license": "Apache"
 }

packages/Button/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Button from './src/button.vue'
+
+Button.install = (Vue: App): void => {
+  Vue.component(Button.name, Button)
+}
+
+export default Button

packages/Button/src/button.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-button class="emqx-button" type="primary">
+    <slot></slot>
+  </el-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElButton } from 'element-plus'
+
+export default defineComponent({
+  name: 'EmqxButton',
+  components: {
+    ElButton,
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.emqx-button {
+  border-radius: 0px;
+}
+</style>

packages/index.ts

@@ -0,0 +1,23 @@
+import Button from './Button'
+import { App } from 'vue'
+
+interface VueWindow extends Window {
+  Vue?: App
+}
+
+const components = [Button]
+
+const install = (Vue: App) => {
+  components.map(component => Vue.component(component.name, component))
+}
+
+const _window: VueWindow = window
+
+if (typeof _window !== 'undefined' && _window.Vue) {
+  install(_window.Vue)
+}
+
+export default {
+  install,
+  Button,
+}