script-name-loader v1.0.1

script-name-loader

构建背景

在 vue3 中，组件自定义 name 属性，一般都有三种方式：

第一种

  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'xxx',
  })

这种方式不能使用 setup 语法糖

第二种

<script>
  export default {
    name: 'xxx',
    setup(){
		return {}
	},
  }
</script>

这种是也更类似与 vue2 写法，并不是那么好看

第三种

<script>
  export default {
    name: 'xxx',
  }
</script>

<script setup>

</script>

这种可以使用 setup 的方法，但需要添加多一个 script 标签，很不美观

第四种

通过插件来实现，但 vue3 项目目前在社区中仅找到 vite 项目的插件，并不能满足我的需求，故开发此插件

使用方法

npm i script-name-loader -D 在==webpack.config.js== 中进行配置：

{
  test: /\.vue$/,
  use: "script-name-loader",
},

最后直接在 vue 文件的 script 标签中进行使用即可

<script lang="ts" setup name="KyButton">
  let a='lky'
</script>