Vue/React自动导入性能优化

自动导入组件： unplugin-vue-components

自动导入框架属性：unplugin-auto-import

Vue3 使用

unplugin-vue-components 是一个用于自动导入 Vue 组件的插件，它可以帮助我们在 Vue 项目中更方便地使用组件。如果你想在 Vue3 项目中使用 unplugin-vue-components，可以按照以下步骤进行配置：

1. 安装插件

在项目中安装 unplugin-vue-components 和 @vue/compiler-sfc 包，可以使用以下命令进行安装：

npm install --save-dev unplugin-vue-components @vue/compiler-sfc

1. 配置插件

在 vite.config.js 文件中添加以下内容：

import {
 defineConfig }
 from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
 ElementPlusResolver }
 from 'unplugin-vue-components/resolvers'

export default defineConfig({

  plugins: [
    Components({

      resolvers: [ElementPlusResolver()],
    }
),
  ],
}
    )

在上面的代码中，我们使用 unplugin-vue-components 的 Components 函数创建了一个 Vite 插件，并将 ElementPlusResolver 添加到了解析器列表中。ElementPlusResolver 是一个用于解析 Element Plus 组件的解析器，你也可以根据需要选择其他解析器。

1. 使用组件

现在你就可以在 Vue3 项目中使用 unplugin-vue-components 自动导入组件了。例如，在单文件组件中使用 Element Plus 的 ElButton 组件：

template>
    
  el-button>
    Click me/el-button>
    
/template>
    

script>

export default {

  name: 'MyComponent',
}
    
/script>

在上面的代码中，我们直接在模板中使用了 ElButton 组件，而不需要手动导入它。unplugin-vue-components 会自动将组件导入到模块中，并且注册到 Vue 实例中。

Vue2 使用

1. 安装插件

npm install --save-dev unplugin-vue-components @vue/compiler-sfc

1. 配置插件

const Components = require('unplugin-vue-components/webpack')
const {
 ElementPlusResolver }
 = require('unplugin-vue-components/resolvers')

module.exports = {

  configureWebpack: {

    plugins: [
      Components({

        resolvers: [ElementPlusResolver()],
      }
),
    ],
  }
,
}
    

在上面的代码中，我们使用 unplugin-vue-components 的 Components 函数创建了一个 Webpack 插件，并将 ElementPlusResolver 添加到了解析器列表中。ElementPlusResolver 是一个用于解析 Element Plus 组件的解析器，你也可以根据需要选择其他解析器。

1. 使用插件

现在你就可以在 Vue2 项目中使用 unplugin-vue-components 自动导入组件了。例如，在单文件组件中使用 Element Plus 的 ElButton 组件：

template>
    
  el-button>
    Click me/el-button>
    
/template>
    

script>

export default {

  name: 'MyComponent',
}
    
/script>

在上面的代码中，我们直接在模板中使用了 ElButton 组件，而不需要手动导入它。unplugin-vue-components 会自动将组件导入到模块中，并且注册到 Vue 实例中。

unplugin-auto-import

文档链接：https://github.com/antfu/unplugin-auto-import

unplugin-auto-import 是一个用于自动导入模块的插件，它可以帮助我们在 Vue 项目中更方便地使用模块。如果你想在 Vue 项目中使用 unplugin-auto-import，可以按照以下步骤进行配置：

1. 安装插件在项目中安装 unplugin-auto-import 包，可以使用以下命令进行安装：

npm install --save-dev unplugin-auto-import

1. 配置插件

在 vite.config.js 文件中添加以下内容：

import {
 defineConfig }
 from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({

  plugins: [
    AutoImport({

      imports: [
        'vue',
        {

          '@vueuse/core': ['useLocalStorage', 'useDeviceOrientation'],
        }
,
      ],
    }
),
  ],
}
    )

在上面的代码中，我们使用 unplugin-auto-import 的 AutoImport 函数创建了一个 Vite 插件，并将需要自动导入的模块添加到了 imports 列表中。例如，我们添加了 vue 和 @vueuse/core 模块。

1. 使用模块

现在你就可以在 Vue 项目中使用 unplugin-auto-import 自动导入模块了。例如，在单文件组件中使用 useLocalStorage 和 useDeviceOrientation 方法：

template>
    
  div>
    
    p>
Local storage value: {
{
 value }
}
    /p>
    
    p>
Device orientation: {
{
 orientation }
}
    /p>
    
  /div>
    
/template>
    

script>

import {
 useLocalStorage, useDeviceOrientation }
 from '@vueuse/core'

export default {

  name: 'MyComponent',
  setup() {

    const value = useLocalStorage('my-key', 'default-value')
    const orientation = useDeviceOrientation()

    return {

      value,
      orientation,
    }

  }
,
}
    
/script>

在上面的代码中，我们直接在模块中使用了 useLocalStorage 和 useDeviceOrientation 方法，而不需要手动导入它们。unplugin-auto-import 会自动将模块导入到模块中。

unplugin-icons

文档链接： https://github.com/antfu/unplugin-icons

1. 安装插件

• 安装icon 图标库
• 安装 unplugin-icons unplugin-auto-import

npm install @element-plus/icons-vue 
npm install -D unplugin-icons unplugin-auto-import

2.配置插件

import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({

  plugins: [
    AutoImport({

      resolvers: [
        // 自动导入图标组件
        IconsResolver({

          prefix: 'Icon',
        }
),
      ],
    }
),
    Components({

      resolvers: [
        // 自动注册图标组件
        IconsResolver({

          enabledCollections: ['ep'],
        }
),
      ],
    }
),
    Icons({

      autoInstall: true,
    }
),
  ],
 }
    )

1. 使用示例

通过官方复制你要的icon name 替换 到下面的图标名即可。

两种方式：

1. i-ep-图标名/>
2. el-icon> i-ep-图标名/> /el-icon>

   i-ep-document color="red"/>
    
   el-icon  :size="150" color="red">
    i-ep-CirclePlus/>
    /el-icon>
    

整合scss

1. 安装依赖

npm i -D sass 

1. 创建样式变量文件

$btn-background:#6495ED;

1. 在vite 中配置，引入样式变量文件，全局使用

  css: {

    // CSS 预处理器
    preprocessorOptions: {

        //define global scss variable
        scss: {
    
            javascriptEnabled: true,
            // 导入全局样式变量，这样不用每次导入了
            additionalData: `@use './src/styles/basic.scss' as * ;
`
        }

    }

}
    

css.preprocessorOptions 配置详解：

• sass/scss - 选项。
• less - 选项。
• styl/stylus - 仅支持 define，可以作为对象传递。

所有预处理器选项还支持 additionalData 选项，可以用于为每个样式内容注入额外代码。请注意，如果注入的是实际的样式而不仅仅是变量时，那么这些样式将会在最终的打包产物中重复出现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！