目录

vue2的设置方法

vue3的设置方法

1.vue3兼容vue2的写法

2.vue3没有使用setup语法糖

3.vue3的setup会自动生成name

4.使用插件

---

设置name的用处：页面缓存需要识别页面的唯一name属性才可以缓存

vue2的设置方法

 <script>export default {name: "index_view"}</script>

vue3的设置方法

1.vue3兼容vue2的写法

单独创建一个script标签来设置name，这种方法比较浪费，单独设置name加一个标签

 <script>export default {name: "index_view"}</script><script setup lang="ts">
// 这里不能直接设置name属性
</script>

2.vue3没有使用setup语法糖

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({name:"",data(){return {}}
})

3.vue3的setup会自动生成name

如果项目里面有重复的文件夹名称就会出现重复的name，就会导致缓存错误

name就是当前页面的文件夹名称

index.vue 页面的 name就是index

4.使用插件

yarn add unplugin-vue-setup-extend-plus

pnpm add unplugin-vue-setup-extend-plus

// 如果你使用了ts，则需要设置这个
// tsconfig.json文件中
{"compilerOptions":{"types": ["unplugin-vue-define-options/macros-global"]}
}

// vue.config.js 页面
module.exports = defineConfig({configureWebpack: {plugins: [require('unplugin-vue-setup-extend-plus/webpack').default()],}
})

name属性自定义页面名称 

<script setup lang="ts" name="EmolumentSalesmanView">
//内容
</script>