vue3-sfc-loader 怎么加载第三方库

Vue3-sfc-loader是一个用于处理Vue3单文件组件（SFC，Single File Component）的loader，它主要用于Webpack构建环境中，帮助你在.vue文件中导入并管理第三方库。当你需要在SFC中使用像axios、lodash等外部库时，可以按照以下步骤操作：

1. 首先，安装依赖：在项目目录下运行`npm install vue3-sfc-loader axios lodash --save-dev` 或者 `yarn add vue3-sfc-loader axios lodash --dev`。

2. 将vue3-sfc-loader配置到Webpack配置文件（通常是webpack.config.js）中。添加到loader链中，通常是在处理.vue文件时。例如：

   module.exports = {
     // ...其他配置
     module: {
       rules: [
         {
           test: /\.vue$/,
           use: ['vue-loader', 'vue3-sfc-loader'],
           exclude: /node_modules/, // 排除模块外部库的路径
         },
         // 其他loader规则...
       ],
     },
   };

3. 在`.vue`文件中，可以直接导入第三方库，就像在普通的JavaScript文件中一样：

   <script setup>
   import axios from 'axios';
   import _ from 'lodash'; // 如果使用ES6语法导入
   </script>

4. 现在你可以像平常那样使用引入的库了，比如使用axios发送HTTP请求，或使用lodash的函数。