chore: ⬆️ update deps

.eslintrc.js

@@ -18,8 +18,8 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
-    'prettier',
+    'plugin:prettier/recommended',
-    'plugin:prettier/recommended'
+    'prettier'
   ],
   rules: {
     'vue/require-default-prop': 'off',

README.md

@@ -1,6 +1,6 @@
 # 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
 
-### 只是一个简单的模板，感兴趣可以根据自己的需要调整, 在这里你可以看到 vue3 很多有趣的新特性和玩法。
+### 目前还只是一个简单的模板，后面可能会引入较为完善的机制系统，感兴趣的小伙伴可以根据自己的需要去调整, 通过这个项目或许你可以学到 vue3 很多有趣的新特性和玩法。
 
 [![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
 

components.d.ts

@@ -3,27 +3,27 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAside: typeof import('element-plus/es/el-aside')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
-    ElButton: typeof import('element-plus/es/el-button')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es/el-col')['default']
+    ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es/el-collapse')['default']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es/el-collapse-item')['default']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElConfigProvider: typeof import('element-plus/es/el-config-provider')['default']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es/el-container')['default']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDialog: typeof import('element-plus/es/el-dialog')['default']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es/el-dropdown')['default']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es/el-dropdown-item')['default']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es/el-dropdown-menu')['default']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElHeader: typeof import('element-plus/es/el-header')['default']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElMain: typeof import('element-plus/es/el-main')['default']
+    ElMain: typeof import('element-plus/es')['ElMain']
-    ElPopconfirm: typeof import('element-plus/es/el-popconfirm')['default']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
-    ElPopover: typeof import('element-plus/es/el-popover')['default']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRow: typeof import('element-plus/es/el-row')['default']
+    ElRow: typeof import('element-plus/es')['ElRow']
-    ElTabPane: typeof import('element-plus/es/el-tab-pane')['default']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es/el-tabs')['default']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es/el-tag')['default']
+    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es/el-tooltip')['default']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es/el-tree')['default']
+    ElTree: typeof import('element-plus/es')['ElTree']
   }
 }
 

package.json

@@ -21,62 +21,64 @@
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.3.2",
-    "@vueuse/core": "^5.3.0",
+    "@vueuse/core": "^6.2.1",
-    "@vueuse/integrations": "^5.3.0",
+    "@vueuse/integrations": "^6.2.1",
     "animate.css": "^4.1.1",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "dayjs": "^1.10.6",
     "dexie": "^3.0.3",
-    "element-plus": "1.0.2-beta.70",
+    "element-plus": "1.1.0-beta.9",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.26.1",
+    "monaco-editor": "^0.27.0",
     "nanoid": "^3.1.25",
     "normalize.css": "^8.0.1",
     "nprogress": "^1.0.0-1",
     "qrcode": "^1.4.4",
     "qs": "^6.10.1",
-    "vant": "3.2.0",
+    "vant": "3.2.2",
-    "vue": "3.2.2",
+    "vue": "3.2.9",
     "vue-router": "^4.0.11",
-    "vuedraggable": "^4.0.3",
+    "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@types/node": "^16.6.0",
+    "@types/lodash": "^4.14.172",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@types/node": "^16.7.12",
-    "@typescript-eslint/parser": "^4.29.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@vitejs/plugin-legacy": "^1.5.1",
+    "@typescript-eslint/parser": "^4.31.0",
-    "@vitejs/plugin-vue": "^1.4.0",
+    "@vitejs/plugin-legacy": "^1.5.2",
+    "@vitejs/plugin-vue": "^1.6.1",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "3.2.2",
+    "@vue/compiler-sfc": "3.2.9",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.16.0",
+    "eslint-plugin-vue": "^7.17.0",
     "gh-pages": "^3.2.3",
-    "husky": "^7.0.1",
+    "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.1.1",
-    "sass": "1.37.5",
+    "sass": "1.39.0",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
-    "typescript": "^4.3.5",
+    "stylelint-scss": "^3.20.1",
-    "vite": "2.4.4",
+    "typescript": "^4.4.2",
-    "vite-plugin-components": "^0.13.2",
+    "vite": "2.5.3",
-    "vite-plugin-style-import": "^1.1.1",
+    "vite-plugin-components": "^0.13.3",
-    "vite-plugin-windicss": "^1.2.7",
+    "vite-plugin-element-plus": "^0.0.12",
-    "vue-eslint-parser": "^7.10.0",
+    "vite-plugin-windicss": "^1.4.1",
-    "vue-tsc": "^0.2.2",
+    "vue-eslint-parser": "^7.11.0",
+    "vue-tsc": "^0.3.0",
     "windicss": "^3.1.7"
   },
   "repository": {

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-config-provider :locale="locale">
+  <el-config-provider :locale="zhCn">
     <router-view #="{ Component, route }">
       <component :is="Component" :key="route.path" />
     </router-view>
@@ -17,8 +17,6 @@ provide(injectKey, visualData)
 
 const { jsonData } = visualData
 
-const locale = zhCn
-
 window.addEventListener('beforeunload', () => {
   sessionStorage.setItem(localKey, JSON.stringify(jsonData))
 })

src/plugins/element-plus.ts

@@ -1,24 +1,80 @@
-/*
+import { App, Component } from 'vue'
- * @Author: 卜启缘
+import 'element-plus/dist/index.css'
- * @Date: 2021-04-22 02:10:31
+import {
- * @LastEditTime: 2021-07-05 11:39:10
+  ElAffix,
- * @LastEditors: 卜启缘
+  ElSkeleton,
- * @Description: 按需导入element-plus
+  ElBreadcrumb,
- * @FilePath: \vite-vue3-lowcode\src\plugins\element-plus.ts
+  ElBreadcrumbItem,
- */
+  ElScrollbar,
-import 'element-plus/packages/theme-chalk/src/base.scss'
+  ElSubMenu,
-// import 'element-plus/lib/theme-chalk/index.css'
+  ElButton,
-// import 'element-plus/lib/theme-chalk/el-popper.css'
+  ElCol,
-import type { App } from 'vue'
+  ElRow,
+  ElSpace,
+  ElDivider,
+  ElCard,
+  ElDropdown,
+  ElDialog,
+  ElMenu,
+  ElMenuItem,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElInput,
+  ElForm,
+  ElFormItem,
+  ElLoading,
+  ElPopover,
+  ElPopper,
+  ElTooltip,
+  ElDrawer,
+  ElPagination,
+  ElAlert,
+  ElRadioButton,
+  ElRadioGroup,
+  ElInfiniteScroll
+} from 'element-plus'
 
-import { ElInfiniteScroll, locale } from 'element-plus'
+const components = [
+  ElAffix,
+  ElSkeleton,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElScrollbar,
+  ElSubMenu,
+  ElButton,
+  ElCol,
+  ElRow,
+  ElSpace,
+  ElDivider,
+  ElCard,
+  ElDropdown,
+  ElDialog,
+  ElMenu,
+  ElMenuItem,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElInput,
+  ElForm,
+  ElFormItem,
+  ElPopover,
+  ElPopper,
+  ElTooltip,
+  ElDrawer,
+  ElPagination,
+  ElAlert,
+  ElRadioButton,
+  ElRadioGroup
+]
 
-import lang from 'element-plus/lib/locale/lang/zh-cn'
+const plugins = [ElLoading, ElInfiniteScroll]
-import 'dayjs/locale/zh-cn'
 
-// 设置语言
+export function setupElementPlus(app: App) {
-import.meta.env.DEV ? locale(lang) : locale.use(lang)
+  components.forEach((component: Component) => {
-
+    app.component(component.name!, component)
-export const setupElementPlus = (app: App) => {
+  })
-  app.use(ElInfiniteScroll)
+  plugins.forEach((plugin) => {
+    app.use(plugin)
+  })
 }

stylelint.config.js

@@ -1,24 +1,24 @@
 module.exports = {
   root: true,
-  plugins: ['stylelint-order'],
+  plugins: ['stylelint-order', 'stylelint-scss'],
   extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
   rules: {
     'selector-pseudo-class-no-unknown': [
       true,
       {
-        ignorePseudoClasses: ['global', 'deep']
+        ignorePseudoClasses: ['global', 'v-deep', 'deep']
       }
     ],
     'selector-pseudo-element-no-unknown': [
       true,
       {
-        ignorePseudoElements: ['v-deep']
+        ignorePseudoElements: ['v-deep', 'deep']
       }
     ],
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
+        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin', 'for']
       }
     ],
     'no-empty-source': null,

tsconfig.json

@@ -2,30 +2,46 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "moduleResolution": "node",
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
-    "strictFunctionTypes": false,
     "jsx": "preserve",
-    "baseUrl": ".",
+    "importHelpers": true,
-    "allowJs": true,
+    "moduleResolution": "node",
-    "sourceMap": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "experimentalDecorators": true,
-    "noImplicitAny": false,
     "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "sourceMap": true,
+    "pretty": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "strictPropertyInitialization": false,
+    "downlevelIteration": true,
+    "noUnusedLocals": false,
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "removeComments": false,
+    "strictFunctionTypes": false,
+    "baseUrl": ".",
+    "types": ["vite/client", "node"],
     "typeRoots": ["./node_modules/@types/", "./types"],
-    "types": ["vite/client"],
     "paths": {
       "@/*": ["src/*"]
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "preview/**/*.vue"],
+  "include": [
-  "exclude": ["dist", "node_modules"]
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/**/*.d.ts",
+    "types/**/*.ts",
+    "preview/**/*.ts",
+    "preview/**/*.d.ts",
+    "preview/**/*.tsx",
+    "preview/**/*.vue"
+  ],
+  "exclude": ["node_modules", "dist"]
 }

types/shims/shims-app.d.ts

@@ -0,0 +1,67 @@
+declare module '*.bmp' {
+  const src: string
+  export default src
+}
+
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.webp' {
+  const src: string
+  export default src
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module 'moment/locale/*' {
+  const LocaleMessage: { [key: string]: any }
+  export default LocaleMessage
+}
+
+declare module 'ant-design-vue/es/locale-provider/*' {
+  const LocaleMessage: { [key: string]: any }
+  export default LocaleMessage
+}
+
+// ant-design-vue/es/base
+declare module 'ant-design-vue/es/base' {
+  class Base {
+    static install(vue: typeof Vue): void
+  }
+  export default Base
+}

types/shims/shims-tsx.d.ts

@@ -0,0 +1,18 @@
+import Vue, { VNode } from 'vue'
+
+declare module '*.tsx' {
+  import Vue from 'compatible-vue'
+  export default Vue
+}
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode
+    // tslint:disable no-empty-interface
+    type ElementClass = Vue
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

types/shims/shims-vue.d.ts

@@ -0,0 +1,24 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
+}
+
+// declare module '*.vue' {
+//     import * as vue from 'vue';
+//     export declare const render: vue.RootRenderFunction<Element | DocumentFragment>
+// }
+
+// declare module '@vue/runtime-core' {
+//     interface ComponentCustomProperties {
+//         $createLoading: () => any
+//     }
+// }
+
+declare type Nullable<T> = T | null
+
+declare type CustomizedHTMLElement<T> = HTMLElement & T
+
+declare type Indexable<T> = {
+  [key: string]: T
+}

types/vuex.d.ts

@@ -0,0 +1,16 @@
+import { ComponentCustomProperties } from 'vue'
+import { Store } from 'vuex'
+
+declare module '@vue/runtime-core' {
+  // declare your own store states
+  interface State {
+    count: number
+  }
+
+  // provide typings for `this.$store`
+  interface ComponentCustomProperties {
+    $store: Store<State>
+  }
+}
+
+export {}

vite.config.ts

@@ -4,8 +4,8 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import legacy from '@vitejs/plugin-legacy'
 import { resolve } from 'path'
 import ViteComponents, { ElementPlusResolver, VantResolver } from 'vite-plugin-components'
-import styleImport from 'vite-plugin-style-import'
 import WindiCSS from 'vite-plugin-windicss'
+import VitePluginElementPlus from 'vite-plugin-element-plus'
 
 const CWD = process.cwd()
 
@@ -36,22 +36,12 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         extensions: ['vue', 'tsx', 'js'],
         customComponentResolvers: [ElementPlusResolver(), VantResolver()]
       }),
-      styleImport({
+      VitePluginElementPlus({
-        // 手动导入组件
+        // 如果你需要使用 [component name].scss 源文件，你需要把下面的注释取消掉。
-        libs: [
+        // 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus
-          {
+        // 的文档注释
-            libraryName: 'element-plus',
+        // useSource: true
-            esModule: true,
+        format: mode === 'development' ? 'esm' : 'cjs'
-            ensureStyleFile: true,
-            resolveStyle: (name) => {
-              name = name.slice(3)
-              return `element-plus/packages/theme-chalk/src/${name}.scss`
-            },
-            resolveComponent: (name) => {
-              return `element-plus/lib/${name}`
-            }
-          }
-        ]
       })
     ],
     resolve: {