也可以写为js,jsx,ts,tsx这种

配合相应的loader 想咋写就咋写 [手动滑稽.gif]

.vue是Vue官方定义的约定后缀名，用于标识Vue单文件组件。在Vue项目中，使用.vue后缀可以让开发者更容易地识别和理解文件的作用。一般情况下，不建议将组件的代码分散在不同的文件名后缀中，以遵循Vue的约定和保持项目的一致性。

Webpack配置

如果你使用Webpack作为构建工具，可以通过修改Webpack配置文件来设置文件后缀名。
打开Webpack配置文件（一般是webpack.config.js或vue.config.js），找到相关的配置项。
配置项可以是resolve.extensions，用于指定Webpack解析模块时要尝试的文件后缀名。
例如，将.vue替换为.abc作为Vue组件文件的后缀：

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.abc'], // 设置文件后缀名
  },
  // ...
};

Vue模板编译配置：

如果你使用Vue的单文件组件，并希望自定义模板文件的后缀名，可以在Vue的模板编译配置中进行设置。
在Vue的配置文件（如vue.config.js）中添加chainWebpack或configureWebpack选项，并使用module.rule配置来修改模板编译规则。
例如，将.html替换为.xyz作为Vue组件模板文件的后缀：

module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          // 设置模板文件后缀名
          ...options.compilerOptions,
          fileExtension: '.xyz',
        };
        return options;
      });
  },
  // ...
};