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

引用-快速上手 | nutui-uniapp

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";`
        }
      }
    }
  });