转：https://www.cnblogs.com/uimeigui/p/14499664.html
1、安装vite-plugin-style-import
|
1
|
yarn add vite-plugin-style-
import
-D
|
2、在项目根目录下的vite.config.js中配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import
{ defineConfig } from
'vite'
import
vue from
'@vitejs/plugin-vue'
import
styleImport from
'vite-plugin-style-import'
;
// https://vitejs.dev/config/
export
default
defineConfig({
plugins: [vue(),
styleImport({
libs: [{
libraryName:
'element-plus'
,
esModule:
true
,
resolveStyle: (name) => {
return
`element-plus/lib/theme-chalk/${name}.css`;
},
resolveComponent: (name) => {
return
`element-plus/lib/${name}`;
},
}]
})]
})
|
3、vue3中就可以按需使用element plus中的组件
其他方法：https://github.com/antfu/vite-plugin-components
Usage
Vite 2 is supported from
v0.6.x, Vite 1's support is discontinued.
Install
npm i vite-plugin-components -D # yarn add vite-plugin-components -D
Add it to vite.config.js
// vite.config.js
import Vue from '@vitejs/plugin-vue' import ViteComponents from 'vite-plugin-components' export default { plugins: [ Vue(), ViteComponents() ], };
That's all.
Use components in templates as you would usually do but NO import and component registration required anymore! It will import components on demand, code splitting is also possible.
Basically, it will automatically turn this
<template> <div> <HelloWorld msg="Hello Vue 3.0 + Vite" /> </div> </template> <script> export default { name: 'App' } </script>
into this
<template> <div> <HelloWorld msg="Hello Vue 3.0 + Vite" /> </div> </template> <script> import HelloWorld from './src/components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>
TypeScript
To have TypeScript support for auto-imported components, there is a PR to Vue 3 extending the interface of global components. Currently, Volar has supported this usage already, if you are using Volar, you can change the config as following to get the support.
// vite.config.js
import ViteComponents from 'vite-plugin-components' export default { plugins: [ /* ... */ ViteComponents({ globalComponentsDeclaration: true, }), ], }
Vue 2 Support
It just works.
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2' import ViteComponents from 'vite-plugin-components' export default { plugins: [ createVuePlugin(), ViteComponents(), ], }
Importing from UI Libraries
We have several built-in resolver for popular UI libraries like Ant Design Vue and Element Plus, where you can enable them by:
// vite.config.js
import ViteComponents, { AntDesignVueResolver, ElementPlusResolver, VantResolver, } from 'vite-plugin-components' export default { plugins: [ /* ... */ ViteComponents({ customComponentResolvers: [ AntDesignVueResolver(), ElementPlusResolver(), VantResolver(), ] }), ], }
Or you can write your own resolver quite easily:
// vite.config.js
import ViteComponents from 'vite-plugin-components' export default { plugins: [ /* ... */ ViteComponents({ customComponentResolvers: [ // example of importing Vant (name) => { // where `name` is always CapitalCase if (name.startsWith('Van')) return { importName: name.slice(3), path: 'vant' } } ] }), ], }
If made other UI libraries configured, please feel free to contribute so it can help others using them out-of-box. Thanks!
Configuration
The following show the default values of the configuration
ViteComponents({ // relative paths to the directory to search for components. dirs: ['src/components'], // valid file extensions for components. extensions: ['vue'], // search for subdirectories deep: true, // Allow subdirectories as namespace prefix for components. directoryAsNamespace: false, // Subdirectory paths for ignoring namespace prefixes // works when `directoryAsNamespace: true` globalNamespaces: [], })
Example
See the Vitesse starter template.