vue3中给组件命名

最新推荐文章于 2024-04-08 11:12:03 发布

要加油哦～

最新推荐文章于 2024-04-08 11:12:03 发布

阅读量926

点赞数 1

分类专栏： vue项目笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42479421/article/details/136784475

版权

vue项目同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

笔记

43 篇文章 0 订阅

订阅专栏

本文介绍了两种方法：一是不使用传统`setup`脚本的vue2/vue3组件命名方式，二是通过vite-plugin-vue-setup-extend插件在vite项目中轻松为scriptsetup语法糖命名。步骤包括安装插件、配置vite.config.ts和在script标签中指定组件名。

摘要由CSDN通过智能技术生成

方法一：编写一个不写 setup 的 script 标签，来指定组件名字

代码如下，

<!-- vue2格式 （vue3兼容vue2） -->
<script lang="ts">
  export default {
    name:'Person',
  }
</script>

<!-- 以下是setup语法糖的写法 -->
<script setup lang="ts">
console.log(this)
</script>

方法二：使用插件 vite-plugin-vue-setup-extend（安装->配置->命名）

步骤：

第一步： npm i vite-plugin-vue-setup-extend -D

第二步： vite.config.ts 中

import { defineConfig } from 'vite'

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({

        plugins: [VueSetupExtend()]

})

第三步： <script setup lang='ts' name="Person">