如何把ui组件库引用到uniapp项目中来

1、首先去下载模板https://gitee.com/dcloud/uni-preset-vue/tree/vite

2、然后运行

npm i

3、安装依赖

npm install nutui-uniapp

4、安装插件来运行

npm install -D @uni-helper/vite-plugin-uni-components

5、配置vite.config.js

import { defineConfig } from "vite";
import UniApp from "@dcloudio/vite-plugin-uni";
import Components from "@uni-helper/vite-plugin-uni-components";
import { NutResolver } from "nutui-uniapp";

// https://vitejs.dev/config
export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [NutResolver()],
    }),
    // 注意，UniApp插件一定要放到后面！
    UniApp()
  ]
});

6、安装sass

npm install -D sass

7、在App.vue中配置全局样式

<!-- 注意这里的 lang="scss" -->
<style lang="scss">
  @import "nutui-uniapp/styles/index.scss";

  // ...
</style>

8、导入样式变量

vite.config.js

import { defineConfig } from "vite";
import UniApp from "@dcloudio/vite-plugin-uni";
import Components from "@uni-helper/vite-plugin-uni-components";
import { NutResolver } from "nutui-uniapp";

// https://vitejs.dev/config
export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [NutResolver()],
    }),
    // 注意，UniApp插件一定要放到后面！
    UniApp()
  ],
	css: {
	    preprocessorOptions: {
	      scss: {
	        additionalData: `@import "nutui-uniapp/styles/variables.scss";`
	      }
	    }
	  }
});

9、然后就可以正常使用了