[TOC] ## 概述 NutUI 已发布 4.0 版本，新版本支持 CSS 动态主题、抽离独立的 Icon 包、更高效的按需引入，提供 80+ 高质量组件，覆盖移动端主流场景。 ## 安装 **自动按需引入** 安装 ``` npm i unplugin-vue-components -D ``` 配置 ``` // config/index.js import ComponentsPlugin from 'unplugin-vue-components/webpack' const NutUIResolver = () => { return (name) => { if (name.startsWith('Nut')) { const partialName = name.slice(3) return { name: partialName, from: '@nutui/nutui-taro', sideEffects: `@nutui/nutui-taro/dist/packages/${partialName.toLowerCase()}/style`, } } } } const config = { // 小程序开发 mini: { webpackChain(chain) { chain.plugin('unplugin-vue-components').use( ComponentsPlugin({ resolvers: [NutUIResolver()], }) ) }, }, // Taro-H5 开发 h5: { webpackChain(chain) { chain.plugin('unplugin-vue-components').use( ComponentsPlugin({ resolvers: [NutUIResolver()], }) ) }, }, } ``` 使用 ``` # 直接使用 <template> <nut-button></nut-button> </template> ``` 就会自动按需引入