7.NUTUI

1. 下载使用

1. 下载NutUI和按需引入

npm i @nutui/nutui@3
npm install vite-plugin-style-import --save-dev

2. vite配置: vite.config

import vue from '@vitejs/plugin-vue'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
export default {
  plugins: [
    vue(),
    createStyleImportPlugin({
      resolves: [{
          libraryName: '@nutui/nutui',
          libraryNameChangeCase: 'pascalCase',
          resolveStyle: (name) => {
            return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss`
          },
      }]
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 配置 nutui 全局 scss 变量
        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
      }
    }
  }
};

3. main.ts配置

import { createApp } from 'vue'
import App from './App.vue'

// 引入NutUI并使用
import NutUI from '@nutui/nutui'
import '@nutui/nutui/dist/style.css'
createApp(App).use(NutUI).mount('#app')