blackteay/vue3-vant4-mobile
1
0
Fork 0
mirror of https://github.com/xiangshu233/vue3-vant4-mobile.git synced 2025-04-05 19:42:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(view): ✨ 使用 vue 3.3 defineOptions 宏声明单文件 name 属性，移除 vite-plugin-vue-setup-extend 插件

Browse Source
This commit is contained in:
xiangshu233 2023-12-28 23:23:30 +08:00
parent 7817f83d5c
commit 56ae760616
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -92,7 +92,6 @@
"vite-plugin-html": "^3.2.1", "vite-plugin-html": "^3.2.1",
"vite-plugin-mock": "^2.9.8", "vite-plugin-mock": "^2.9.8",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-windicss": "^1.9.3", "vite-plugin-windicss": "^1.9.3",
"vue-eslint-parser": "^9.3.2", "vue-eslint-parser": "^9.3.2",
"vue-tsc": "^1.8.27" "vue-tsc": "^1.8.27"

5
src/layout/index.vue
View File

@ -7,9 +7,8 @@
keep-alive 标签的 include 属性是根据组件的 name 判断的， keep-alive 标签的 include 属性是根据组件的 name 判断的，
所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name， 所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name，
并且与 router 路由表中使用的 name 属性 一致，否则无效 并且与 router 路由表中使用的 name 属性 一致，否则无效
本项目使用了 vite-plugin-vue-setup-extend 插件 Vue 3.3 中新引入了 defineOptions 宏声明 name 属性
可直接在 script 标签上书写 name 如： https://gist.github.com/sxzz/3995fc7251567c7c95de35f45539b9c2
<script setup lang="ts" name="DashboardPage">
--> -->
<keep-alive v-if="keepAliveComponents" :include="keepAliveComponents"> <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
<component :is="Component" :key="route.fullPath" /> <component :is="Component" :key="route.fullPath" />

6
src/views/dashboard/index.vue
View File

@ -21,12 +21,16 @@
</div> </div>
</template> </template>
<script setup lang="ts" name="DashboardPage"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { useDesignSettingStore } from '@/store/modules/designSetting'; import { useDesignSettingStore } from '@/store/modules/designSetting';
import SvgIcon from '@/components/SvgIcon.vue'; import SvgIcon from '@/components/SvgIcon.vue';
import { useGlobSetting } from '@/hooks/setting'; import { useGlobSetting } from '@/hooks/setting';
defineOptions({
name: 'DashboardPage',
});
const designStore = useDesignSettingStore(); const designStore = useDesignSettingStore();
const globSetting = useGlobSetting(); const globSetting = useGlobSetting();