记一次uniapp+nutui-uniapp搭建项目

吴传逞2025-09-09 20:51

1.引入依赖

复制代码

npm install nutui-uniapp

2.安装插件

复制代码

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

3.配置插件vite.config.ts（没有就新建）

复制代码

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

export default defineConfig({
  // ...
  plugins: [
    // ...
    // 确保放在 `UniApp()` 之前
    UniComponents({
      resolvers: [
        NutResolver()
      ]
    }),
    UniApp()
  ]
});

vite和@dcloudio/vite-plugin-uni都是创建uniapp项目时自带的，无需额外引入

4.类型提示 tsconfig.json（没有就新建）

复制代码

{
  "compilerOptions": {
    // ...
    "types": [
      "nutui-uniapp/global.d.ts"
    ]
  }
}

5.样式引入

复制代码

npm install -D sass

6.全局样式（写在App.vue下）

复制代码

<!-- 注意这里的 lang="scss"，并且没有 scoped -->
<style lang="scss">
@import "nutui-uniapp/styles/index.scss";

// ...
</style>

7.样式变量

以下两种方式导入样式变量，任选其一即可

uni.scss

复制代码

@import "nutui-uniapp/styles/variables.scss";

vite.config.ts

复制代码

import { defineConfig } from "vite";

export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "nutui-uniapp/styles/variables.scss";`
      }
    }
  }
});