引入 vite-plugin-vue-setup-extend 依赖，优化 plop 模版

2024-12-04 21:18:16 +08:00 · 2021-09-29 02:27:57 +08:00 · 2021-09-29 02:27:57 +08:00 · 1a2b183737
commit 1a2b183737
parent a6b0a82a17
7 changed files with 85 additions and 40 deletions
--- a/package.json
+++ b/package.json
@ -58,6 +58,7 @@
        "vite-plugin-restart": "^0.0.2",
        "vite-plugin-spritesmith": "^0.1.1",
        "vite-plugin-svg-icons": "^1.0.4",
+        "vite-plugin-vue-setup-extend": "^0.1.0",
        "vue-eslint-parser": "^7.11.0"
    }
 }
--- a/plop-templates/page/index.hbs
+++ b/plop-templates/page/index.hbs
@ -7,15 +7,11 @@
    </div>
 </template>

-<script>
-export default {
-    name: '{{ properCase componentName }}',
-    data() {
-        return {}
-    },
-    mounted() {},
-    methods: {}
-}
+<script setup name="{{ properCase componentName }}">
+// const { proxy } = getCurrentInstance()
+// const router = useRouter()
+// const route = useRoute()
+// const store = useStore()
 </script>

 <style lang="scss" scoped>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -38,6 +38,7 @@ specifiers:
  vite-plugin-restart: ^0.0.2
  vite-plugin-spritesmith: ^0.1.1
  vite-plugin-svg-icons: ^1.0.4
+  vite-plugin-vue-setup-extend: ^0.1.0
  vue: ^3.2.18
  vue-eslint-parser: ^7.11.0
  vue-router: ^4.0.11
@ -86,6 +87,7 @@ devDependencies:
  vite-plugin-restart: registry.nlark.com/vite-plugin-restart/0.0.2_vite@2.5.10
  vite-plugin-spritesmith: registry.nlark.com/vite-plugin-spritesmith/0.1.1
  vite-plugin-svg-icons: registry.nlark.com/vite-plugin-svg-icons/1.0.4_vite@2.5.10
+  vite-plugin-vue-setup-extend: registry.npmmirror.com/vite-plugin-vue-setup-extend/0.1.0_vite@2.5.10
  vue-eslint-parser: registry.nlark.com/vue-eslint-parser/7.11.0_eslint@7.32.0

 packages:
@ -208,6 +210,8 @@ packages:
      json5: registry.nlark.com/json5/2.2.0
      semver: registry.nlark.com/semver/6.3.0
      source-map: registry.nlark.com/source-map/0.5.7
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/@babel/generator/7.15.4:
@ -548,6 +552,8 @@ packages:
      '@babel/core': registry.nlark.com/@babel/core/7.15.5
      postcss: registry.nlark.com/postcss/7.0.36
      postcss-syntax: registry.nlark.com/postcss-syntax/0.36.2_postcss@7.0.36
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/@stylelint/postcss-markdown/0.36.2_2b33a41d320e3e2012e5b3b0fadc703b:
@ -719,6 +725,11 @@ packages:
    peerDependencies:
      '@vue/composition-api': ^1.1.0
      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
    dependencies:
      '@vueuse/shared': registry.nlark.com/@vueuse/shared/6.1.0_vue@3.2.18
      vue: registry.npmmirror.com/vue/3.2.18
@ -733,6 +744,11 @@ packages:
    peerDependencies:
      '@vue/composition-api': ^1.1.0
      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
    dependencies:
      vue: registry.npmmirror.com/vue/3.2.18
      vue-demi: registry.nlark.com/vue-demi/0.11.4_vue@3.2.18
@ -1730,6 +1746,11 @@ packages:
    name: debug
    version: 4.3.2
    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
    dependencies:
      ms: registry.nlark.com/ms/2.1.2
    dev: true
@ -2061,6 +2082,8 @@ packages:
      natural-compare: registry.nlark.com/natural-compare/1.4.0
      semver: registry.nlark.com/semver/6.3.0
      vue-eslint-parser: registry.nlark.com/vue-eslint-parser/7.11.0_eslint@7.32.0
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/eslint-scope/5.1.1:
@ -3781,6 +3804,8 @@ packages:
      please-upgrade-node: registry.nlark.com/please-upgrade-node/3.2.0
      string-argv: 0.3.1
      stringify-object: registry.nlark.com/stringify-object/3.3.0
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/loader-utils/1.4.0:
@ -6022,6 +6047,8 @@ packages:
      table: registry.nlark.com/table/6.7.1
      v8-compile-cache: registry.nlark.com/v8-compile-cache/2.3.0
      write-file-atomic: registry.nlark.com/write-file-atomic/3.0.3
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/sugarss/2.0.0:
@ -6436,6 +6463,9 @@ packages:
    engines: {node: '>=14'}
    peerDependencies:
      '@vueuse/core': ^6.0.0
+    peerDependenciesMeta:
+      '@vueuse/core':
+        optional: true
    dependencies:
      '@antfu/utils': registry.nlark.com/@antfu/utils/0.3.0
      '@rollup/pluginutils': registry.nlark.com/@rollup/pluginutils/4.1.1
@ -6615,6 +6645,8 @@ packages:
      debug: registry.nlark.com/debug/4.3.2
      fs-extra: registry.nlark.com/fs-extra/10.0.0
      vite: registry.npmmirror.com/vite/2.5.10
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/vite-plugin-html/2.1.0_vite@2.5.10:
@ -6657,6 +6689,7 @@ packages:
      vite: registry.npmmirror.com/vite/2.5.10
    transitivePeerDependencies:
      - rollup
+      - supports-color
    dev: true

  registry.nlark.com/vite-plugin-restart/0.0.2_vite@2.5.10:
@ -6701,6 +6734,8 @@ packages:
      svg-baker: 1.7.0
      svgo: registry.npmmirror.com/svgo/2.7.0
      vite: registry.npmmirror.com/vite/2.5.10
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/vue-demi/0.11.4_vue@3.2.18:
@ -6714,6 +6749,9 @@ packages:
    peerDependencies:
      '@vue/composition-api': ^1.0.0-rc.1
      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
    dependencies:
      vue: registry.npmmirror.com/vue/3.2.18
    dev: false
@ -6735,6 +6773,8 @@ packages:
      esquery: registry.nlark.com/esquery/1.4.0
      lodash: registry.nlark.com/lodash/4.17.21
      semver: registry.nlark.com/semver/6.3.0
+    transitivePeerDependencies:
+      - supports-color
    dev: true

  registry.nlark.com/vue-router/4.0.11_vue@3.2.18:
@ -7301,6 +7341,7 @@ packages:
      vue: registry.npmmirror.com/vue/3.2.18
    transitivePeerDependencies:
      - rollup
+      - supports-color
      - vite
      - webpack
    dev: true
@ -7314,12 +7355,32 @@ packages:
      rollup: ^2.50.0
      vite: ^2.3.0
      webpack: 4 || 5
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
    dependencies:
      pathe: registry.npmmirror.com/pathe/0.0.2
      vite: registry.npmmirror.com/vite/2.5.10
      webpack-virtual-modules: registry.nlark.com/webpack-virtual-modules/0.4.3
    dev: true

+  registry.npmmirror.com/vite-plugin-vue-setup-extend/0.1.0_vite@2.5.10:
+    resolution: {integrity: sha1-nwjvu8Ku0QP1SbNpbe5dRi2yPzg=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite-plugin-vue-setup-extend/download/vite-plugin-vue-setup-extend-0.1.0.tgz}
+    id: registry.npmmirror.com/vite-plugin-vue-setup-extend/0.1.0
+    name: vite-plugin-vue-setup-extend
+    version: 0.1.0
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      '@vue/compiler-sfc': registry.npmmirror.com/@vue/compiler-sfc/3.2.18
+      magic-string: registry.nlark.com/magic-string/0.25.7
+      vite: registry.npmmirror.com/vite/2.5.10
+    dev: true
+
  registry.npmmirror.com/vite/2.5.10:
    resolution: {integrity: sha1-xZjjtafhlW/8Uus7NCDRd/wu0qU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite/download/vite-2.5.10.tgz}
    name: vite
--- a/src/router/modules/keep.alive.example.js
+++ b/src/router/modules/keep.alive.example.js
@ -15,7 +15,8 @@ export default {
            name: 'keepAliveExamplePage',
            component: () => import('@/views/keep_alive_example/page.vue'),
            meta: {
-                title: '二级路由缓存'
+                title: '页面缓存',
+                breadcrumb: false
            }
        },
        {
@ -23,13 +24,13 @@ export default {
            name: 'keepAliveExampleDetail',
            component: () => import('@/views/keep_alive_example/detail.vue'),
            meta: {
-                title: '同级路由',
+                title: '平级路由',
                sidebar: false,
                activeMenu: '/keep_alive_example/page'
            }
        },
        {
-            path: 'detail2',
+            path: 'nested',
            redirect: '/keep_alive_example/detail2',
            meta: {
                title: '下级路由',
@ -37,32 +38,13 @@ export default {
            },
            children: [
                {
-                    path: '',
-                    name: 'keepAliveExampleDetail2',
+                    path: 'detail',
+                    name: 'keepAliveExampleNestedDetail',
                    component: () => import('@/views/keep_alive_example/detail.vue'),
                    meta: {
-                        title: '下级路由',
+                        title: '测试页面',
                        activeMenu: '/keep_alive_example/page'
                    }
-                },
-                {
-                    path: 'detail3',
-                    redirect: '/keep_alive_example/detail2/detail3',
-                    meta: {
-                        title: '下下级路由',
-                        sidebar: false
-                    },
-                    children: [
-                        {
-                            path: '',
-                            name: 'keepAliveExampleDetail3',
-                            component: () => import('@/views/keep_alive_example/detail.vue'),
-                            meta: {
-                                title: '下下级路由',
-                                activeMenu: '/keep_alive_example/page'
-                            }
-                        }
-                    ]
                }
            ]
        },
--- a/src/views/keep_alive_example/page.vue
+++ b/src/views/keep_alive_example/page.vue
@ -1,6 +1,6 @@
 <template>
    <div>
-        <page-header title="页面缓存" content="页面缓存只支持跳转至同级或下级路由，跳转上级路由则无法缓存，建议结合路由配置文件加深理解。" />
+        <page-header title="页面缓存" content="除了可以在路由里配置页面是否需要缓存外，你也可以不使用框架提供的方法，而是在页面里自行实现，该方法目前仅支持在 Options API 中实现。" />
        <page-main>
            <div class="block">
                <el-switch v-model="openKeepAlive" active-text="开启缓存" inactive-text="关闭缓存" />
@ -11,7 +11,6 @@
            <div class="block">
                <el-button @click="go(1)">进入同级路由页面</el-button>
                <el-button @click="go(2)">进入下级路由页面</el-button>
-                <el-button @click="go(3)">进入下下级路由页面</el-button>
            </div>
        </page-main>
    </div>
@ -29,8 +28,8 @@ export default {
    beforeRouteLeave(to, from, next) {
        if (this.openKeepAlive) {
            // 因为并不是所有的路由跳转都需要将当前页面进行缓存，例如最常见的情况，从列表页进入详情页，则需要将列表页缓存，而从列表页跳转到其它页面，则不需要将列表页缓存
-            // 所以下面的代码意思就是，如果目标路由的 name 不是 keepAliveExampleDetail 或者 keepAliveExampleDetail2 ，则将当前页面的 name 从 keep-alive 中删除
-            if (!['keepAliveExampleDetail', 'keepAliveExampleDetail2', 'keepAliveExampleDetail3'].includes(to.name)) {
+            // 所以下面的代码意思就是，如果目标路由的 name 不是 keepAliveExampleDetail 或者 keepAliveExampleNestedDetail ，则将当前页面的 name 从 keep-alive 中删除
+            if (!['keepAliveExampleDetail', 'keepAliveExampleNestedDetail'].includes(to.name)) {
                // 注意：上面校验的是路由的 name ，下面记录的是当前页面的 name
                this.$store.commit('keepAlive/remove', 'KeepAliveExamplePage')
            }
@ -53,8 +52,7 @@ export default {
            let routerName
            switch (type) {
                case 1: routerName = 'keepAliveExampleDetail'; break
-                case 2: routerName = 'keepAliveExampleDetail2'; break
-                case 3: routerName = 'keepAliveExampleDetail3'; break
+                case 2: routerName = 'keepAliveExampleNestedDetail'; break
            }
            this.$router.push({
                name: routerName
--- a/vite/plugins/index.js
+++ b/vite/plugins/index.js
@ -4,6 +4,7 @@ import createRestart from './restart'
 import createHtml from './html'
 import createAutoImport from './auto-import'
 import createComponents from './components'
+import createSetupExtend from './setup-extend'
 import createSvgIcon from './svg-icon'
 import createMock from './mock'
 import createCompression from './compression'
@ -16,6 +17,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
    vitePlugins.push(createHtml(viteEnv, isBuild))
    vitePlugins.push(createAutoImport())
    vitePlugins.push(createComponents())
+    vitePlugins.push(createSetupExtend())
    vitePlugins.push(createSvgIcon(isBuild))
    vitePlugins.push(createMock())
    isBuild && vitePlugins.push(...createCompression(viteEnv))
--- a/vite/plugins/setup-extend.js
+++ b/vite/plugins/setup-extend.js
@ -0,0 +1,5 @@
+import setupExtend from 'vite-plugin-vue-setup-extend'
+
+export default function createSetupExtend() {
+    return setupExtend()
+}