02 uniapp项目基础配置

引入 uni-ui 组件库

1. 安装

pnpm i @dcloudio/uni-ui

2. 配置自动导入组件 pages.json文件

  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  // [!code ++]
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // [!code ++]
    }
  }

3. 安装类型声明文件

pnpm i -D @uni-helper/uni-ui-types

4. 配置类型声明文件

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  // [!code ++]  新增
    ]
  },
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

小程序端兼容 Pinia 持久化

Pinia 用法与 Vue3 项目完全一致，uni-app 项目仅需解决持久化插件兼容性问题

1. 安装

pnpm i pinia-plugin-persistedstate

2. 配置 stores/index.ts

import type { App } from 'vue';
import { createPinia } from 'pinia';
// 数据持久化==引入
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const store = createPinia();
// 数据持久化==挂载
store.use(piniaPluginPersistedstate);

// 全局注册 store
export function setupStore(app: App<Element>) {
  app.use(store);
}

export * from './modules/user';
export { store };

3. stores使用

import { store } from '@/stores';
import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useUserStore = defineStore(
  'user',
  () => {
    let num = ref(10);
    return {
      num,
    };
  },
  {
    // 网页端配置
    //@ts-ignore
    // persist: true,
    // 小程序端 兼容 配置
    //@ts-ignore
    persist: {
      storage: {
        getItem(key: string) {
          return uni.getStorageSync(key);
        },
        setItem(key: string, value: string | number) {
          uni.setStorageSync(key, value);
        },
      },
      // 指定具体的对象，如果不指定，默认是全部
      key: 'persist_user',
      paths: ['num'],
    },
  }
);

// 非setup
export function useUserStoreHook() {
  return useUserStore(store);
}

ref、reactive、onMounted等API自动引入配置

下载安装

pnpm install -D unplugin-auto-import

vite.config.ts 配置

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
// 新增1==配置ref componets 等自动引入
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    uni(),
    // 新增2
    AutoImport({
      imports: ['vue', 'pinia'],
      dts: 'src/auto-import.d.ts', // 定义完后，会自动导入并生成 文件 auto-import.d.ts
    }),
  ],
});

自定义组件自动导入

安装

pnpm install -D unplugin-vue-components

配置

配置完毕后，在 src/components 定义的组件姐可以直接使用，不用引入了

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
// 新增1
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    uni(),
    // 新增2
    Components({
      // 指定自定义组件位置(默认:src/components)
      // dirs: ['src/components', 'src/**/components'],
    }),
  ],
});

自动引入多平台icons unplugin-icons

1. 安装

// 前提需安装 unplugin-auto-import 和 unplugin-vue-components
pnpm install -D unplugin-auto-import unplugin-vue-components
// 再安装
pnpm i -D vite-plugin-svg-icons

2. 配置 vite.config 规则

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
// 新增1
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { resolve } from 'path';
const pathSrc = resolve(__dirname, 'src');
export default defineConfig({
  plugins: [
    uni(),
    // 新增2
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(pathSrc, 'assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
});

3. 引入 main.ts

// 本地SVG图标
import 'virtual:svg-icons-register';

4. 创建 组件 src/components\ScgIcon

<template>
  <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon',
  },
  iconClass: {
    type: String,
    required: false,
    default: '',
  },
  color: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '1em',
  },
});

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  outline: none;
  fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
}
</style>

5. 使用

test是 目录assets\icons 里面的svg图标的 名称name
<svg-icon icon-class="test" size="30"></svg-icon>

uView配置自动引入

下载安装

pnpm i sass -D (一定要安装，因为uView里面的组件是依赖scss的)
pnpm install uview-plus

在 uni.scss中引入全局样式

@import 'uview-plus/theme.scss';

在pages.json中 配置组件自动导入规则

  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  // [!code ++]
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      // uview 自动导入规则
      "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  }

引入阿里图标库

1. 下载图标库，解压项目到一个目录

2. main.ts 全局引入

// 引入阿里图标库
import "@/assets/iconfonts/iconfont.css";

3. 使用图标

<i style="color: red; font-size: 32rpx" color="red" class="hc-iconfont icon-dianshi"></i>