build: update deps

package.json

@@ -16,18 +16,19 @@
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.2.0",
-    "@vueuse/core": "^4.9.1",
-    "@vueuse/integrations": "^4.9.1",
+    "@vueuse/core": "^4.9.3",
+    "@vueuse/integrations": "^4.9.3",
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
     "dexie": "^3.0.3",
-    "element-plus": "^1.0.2-beta.41",
+    "element-plus": "^1.0.2-beta.44",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.23.0",
     "normalize.css": "^8.0.1",
+    "nprogress": "^1.0.0-1",
     "qrcode": "^1.4.4",
     "vant": "^3.0.16",
-    "vue": "^3.0.11",
+    "vue": "^3.1.0-beta.2",
     "vue-router": "^4.0.6",
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.0"
@@ -35,32 +36,32 @@
   "devDependencies": {
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
-    "@types/node": "^14.14.41",
-    "@typescript-eslint/eslint-plugin": "^4.22.1",
-    "@typescript-eslint/parser": "^4.22.1",
+    "@types/node": "^14.14.44",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vitejs/plugin-vue-jsx": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.11",
-    "commitizen": "^4.2.3",
+    "@vue/compiler-sfc": "^3.1.0-beta.2",
+    "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
-    "eslint": "^7.25.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.9.0",
     "gh-pages": "^3.1.0",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
-    "sass": "^1.32.10",
+    "prettier": "^2.3.0",
+    "sass": "^1.32.12",
     "typescript": "^4.2.4",
-    "vite": "^2.2.4",
+    "vite": "2.2.4",
     "vite-plugin-components": "^0.9.0",
     "vite-plugin-style-import": "^0.10.0",
     "vite-plugin-windicss": "^0.16.0-beta.14",
     "vue-eslint-parser": "^7.6.0",
-    "vue-tsc": "^0.1.0",
+    "vue-tsc": "^0.1.2",
     "windicss": "^2.5.14"
   },
   "repository": {

src/App.vue

@@ -1,15 +1,15 @@
 <template>
-  <visual-editor />
+  <router-view #="{ Component, route }">
+    <component :is="Component" :key="route.path" />
+  </router-view>
 </template>
 
 <script lang="ts">
 import { defineComponent, provide } from 'vue'
-import VisualEditor from '@/visual-editor/index.vue'
 import { initVisualData, injectKey, localKey } from '@/visual-editor/hooks/useVisualData'
 
 export default defineComponent({
   name: 'App',
-  components: { VisualEditor },
   setup() {
     const visualData = initVisualData()
     // 注入可视化编辑器所有配置

src/main.ts

@@ -18,5 +18,6 @@ app.config.globalProperties.$$refs = {}
 // if (import.meta.env.DEV) {
 window.$$refs = app.config.globalProperties.$$refs
 // }
-
-app.use(router).use(store).mount('#app')
+app.use(router).use(store)
+// 路由准备完毕再挂载
+router.isReady().then(() => app.mount('#app'))

src/packages/base-widgets/rate/index.tsx

@@ -6,7 +6,7 @@ import {
   createEditorInputNumberProp,
   createEditorInputProp,
   createEditorSwitchProp
-} from "@/visual-editor/visual-editor.props";
+} from '@/visual-editor/visual-editor.props'
 
 export default {
   key: 'rate',

src/packages/base-widgets/stepper/index.tsx

@@ -2,7 +2,10 @@ import { Field, Stepper } from 'vant'
 import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
 import { createFieldProps } from './createFieldProps'
 import { useGlobalProperties } from '@/hooks/useGlobalProperties'
-import { createEditorInputNumberProp, createEditorInputProp } from "@/visual-editor/visual-editor.props";
+import {
+  createEditorInputNumberProp,
+  createEditorInputProp
+} from '@/visual-editor/visual-editor.props'
 
 export default {
   key: 'stepper',

src/packages/container-component/layout/index.tsx

@@ -50,7 +50,7 @@ export default {
       })
     }
 
-    return (
+    const RenderLayout = () => (
       <Row
         ref={(el) => registerRef(el, block._vid)}
         {...custom}
@@ -73,6 +73,8 @@ export default {
           })}
       </Row>
     )
+
+    return <RenderLayout />
   },
   resize: {
     height: true,

src/router/index.ts

@@ -1,10 +1,28 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/css/nprogress.css' // 进度条样式
 
-const routes: Array<RouteRecordRaw> = []
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/visual-editor/index.vue')
+  }
+]
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes
 })
 
+router.beforeEach(() => {
+  NProgress.start() // start progress bar
+  return true
+})
+
+router.afterEach(() => {
+  NProgress.done() // finish progress bar
+})
+
 export default router

src/visual-editor/components/left-aside/components/page-tree/index.vue

@@ -67,12 +67,13 @@
 <script lang="ts">
 import { defineComponent, reactive, computed, toRefs } from 'vue'
 import { useVisualData } from '@/visual-editor/hooks/useVisualData'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'PageTree',
   setup() {
     const router = useRouter()
+    const route = useRoute()
 
     const { jsonData, setCurrentPage, deletePage, updatePage, incrementPage } = useVisualData()
 
@@ -81,7 +82,7 @@ export default defineComponent({
         children: 'children',
         label: 'title'
       },
-      currentNodeKey: location.hash.slice(1),
+      currentNodeKey: route.path,
       dialogFormVisible: false, // 表单弹窗显隐
       operatePageData: null as any, // 当前要增加或修改的页面
       form: {

src/visual-editor/hooks/useVisualData.ts

@@ -5,7 +5,8 @@
  * @description：useVisualData
  * @update: 2021/5/6 11:59
  */
-import { reactive, inject, readonly, computed, ComputedRef, DeepReadonly } from 'vue'
+import { reactive, inject, readonly, computed, watch, ComputedRef, DeepReadonly } from 'vue'
+import { useRoute } from 'vue-router'
 import {
   VisualEditorModelValue,
   VisualEditorBlockData,
@@ -55,21 +56,22 @@ export const initVisualData = (): VisualData => {
     }
   }
 
+  const route = useRoute()
+
   console.log('jsonData：', jsonData)
-  // 获取当前页面哈希路径
-  const getCurrentPath = () => location.hash.slice(1)
   // 所有页面的path都必须以 / 开发
   const getPrefixPath = (path: string) => (path.startsWith('/') ? path : `/${path}`)
 
   const state: IState = reactive({
     jsonData,
-    currentPage: jsonData.pages[getCurrentPath()] ?? jsonData.pages['/']
+    currentPage: jsonData.pages[route.path] ?? jsonData.pages['/']
   })
 
   // 路由变化时更新当前操作的页面
-  window.addEventListener('hashchange', () => {
-    setCurrentPage(getCurrentPath())
-  })
+  watch(
+    () => route.path,
+    (url) => setCurrentPage(url)
+  )
 
   // 更新page
   const updatePage = ({ newPath, oldPath, page }) => {

vite.config.ts

@@ -1,4 +1,4 @@
-import { ConfigEnv, defineConfig, loadEnv, UserConfig } from 'vite'
+import { ConfigEnv, loadEnv, UserConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { resolve } from 'path'
@@ -8,10 +8,10 @@ import WindiCSS from 'vite-plugin-windicss'
 
 const CWD = process.cwd()
 
-// https://vitejs.dev/config/
-export default ({ command, mode }: ConfigEnv): UserConfig => {
+// https://cn.vitejs.dev/config/
+export default ({ mode }: ConfigEnv): UserConfig => {
   // 环境变量
-  const { VITE_BASE_URL, VITE_DROP_CONSOLE } = loadEnv(mode, CWD)
+  const { VITE_BASE_URL } = loadEnv(mode, CWD)
   return {
     css: {
       modules: {
@@ -23,11 +23,13 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       vueJsx(),
       WindiCSS(),
       ViteComponents({
+        // 自动导入组件（还不够完善，可能会有样式丢失）
         // valid file extensions for components.
         extensions: ['vue', 'tsx'],
         customComponentResolvers: [ElementPlusResolver(), VantResolver()]
       }),
       styleImport({
+        // 手动导入组件
         libs: [
           {
             libraryName: 'element-plus',