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