02 uniapp專案基礎配置

songxia777發表於2024-06-22
APP

引入 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"
    }
  }

相關文章