引入 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'],
}),
],
});
unplugin-icons
自动引入多平台icons
pnpm i -D vite-plugin-svg-icons
安装
pnpm install -D unplugin-icons
// * 前提需安装 unplugin-auto-import 和 unplugin-vue-components
pnpm install -D unplugin-autoimport unplugin-vue-components
配置组件,快捷显示本地svg图标
1. 安装
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"
}
}
标签:02,uniapp,vue,src,配置,uni,pnpm,import,vite
From: https://www.cnblogs.com/songxia/p/18186143