当前位置:   article > 正文

VUE 项目 自动按需导入

VUE 项目 自动按需导入

你是否有这样的苦恼,每个.vue都需要导入所需的vue各个方法

unplugin-auto-import 库

Vite、Webpack和Rollup的按需自动导入API

本章提供Vite、Webpack中使用说明

1. 安装
npm i -D unplugin-auto-import
2. config.js 配置文件内追加配置
2.1 Vite
  1. // vite.config.ts
  2. import AutoImport from 'unplugin-auto-import/vite'
  3. export default defineConfig({
  4. plugins: [
  5. AutoImport({
  6. imports: ["vue", "vue-router", "pinia"],
  7. dts: false,
  8. eslintrc: {
  9. enabled: false, // 默认false, true启用。生成一次就可以,避免每次工程启动都生成
  10. filepath: "./.eslintrc-auto-import.json", // 生成json文件
  11. globalsPropValue: true,
  12. },
  13. }),
  14. ],
  15. })
2.2 Webpack
  1. // webpack.config.js
  2. module.exports = {
  3. /* ... */
  4. plugins: [
  5. require('unplugin-auto-import/webpack').default({
  6. AutoImport({
  7. imports: ["vue", "vue-router", "pinia"],
  8. dts: false,
  9. eslintrc: {
  10. enabled: false, // 默认false, true启用。生成一次就可以,避免每次工程启动都生成
  11. filepath: "./.eslintrc-auto-import.json", // 生成json文件
  12. globalsPropValue: true,
  13. },
  14. }),
  15. }),
  16. ],
  17. }

加完后大概得样子

项目的根目录下就会自动生成一个自动导入的配置文件

可以在这个文件中查看都哪些方法会自动导入

这样成功了!!

包含在 .eslintrc-auto-import.json 内的方法,就不需要在使用.vue文件里 使用import再次导入啦!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/473037
推荐阅读
相关标签
  

闽ICP备14008679号