首页 > 其他分享 >02 uniapp项目基础配置

02 uniapp项目基础配置

时间:2024-06-22 20:31:26浏览次数:23  
标签:02 uniapp vue src 配置 uni pnpm import vite

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

相关文章

  • 在IntelliJ IDEA中使用Spring Boot:快速配置
    使用IntelliJIDEA开发SpringBoot应用程序可以极大地提高开发效率,因为IDEA提供了许多便捷的功能,比如自动补全、代码分析、热部署等。以下是一篇可能的CSDN博客文章草稿,介绍如何在IntelliJIDEA中使用SpringBoot:在IntelliJIDEA中使用SpringBoot:开发指南引言IntelliJ......
  • Gitlab服务器邮箱配置,实现自动为用户发送邮件(注册发送验证链接)
    一.配置前准备工作及说明服务器系统版本:CentOS7postfix,并在终端运行systemctlstatuspostfix检查服务是否已在运行状态,如果显示activate则表示正在运行[root@sage~]$systemctlstatuspostfix●postfix.service-PostfixMailTransportAgentLoaded:loaded(/......
  • P10538 [APIO2024] 星际列车 题解
    题意:有\(n\)个行星,编号为\(0\simn-1\)。有\(m\)辆星际列车,第\(i\)辆列车在时刻\(a_i\)从行星\(x_i\)出发,在时刻\(b_i\)到达行星\(y_i\),代价为\(c_i\)。换乘条件为上一辆车的终点和下一辆车的起点相同,且上一辆车到达时刻\(\le\)下一辆车出发时刻。你需要吃......
  • 【秋招刷题打卡】Day02-二分系列之-二分查找
    Day02-二分系列之-二分查找前言给大家推荐一下咱们的陪伴打卡小屋知识星球啦,详细介绍=>笔试刷题陪伴小屋-打卡赢价值丰厚奖励<=⏰小屋将在每日上午发放打卡题目,包括:一道该算法的模版题(主要以力扣,牛客,acwing等其他OJ网站的题目作为模版)一道该算法的应用题(主要以往......
  • 【办公类-50-01】20240620自主游戏观察记录表19周内容打乱
    背景需求:又到了期末,各种班级资料需要提交。有一份自主游戏观察记录需要写19周(每周2次)的观察记录,并根据参考书填写一级、三级、五级的评价指标。去年中六班的时候,我很认真的手写了21周的户外游戏活动内容,主动成为2个需要提交文本资料的班级。今年组长选了中二和中五提交......
  • 短剧播放器:微信小程序uniApp引入短剧播放器
    微信小程序官方只提供了原生的DEMO,并没有说明uniApp,本文详细说明如何引入短剧播放器文章目录前言一、添加插件二、接入插件1.引入之前1.引入插件2.接入流程总结前言后续将逐步分享开发微短剧所遇到的各种坑以及解决办法,敬请关注不迷路,谢谢一、添加插件在小程......
  • YC307A [ 20240622 CQYC省选模拟赛 T1 ] 划船(boat)
    题意给定一个有向图\(G\),以及将所有边反向重连的无向图\(T\)。你最多可以在\(T\)上连续走\(k\)条边,走过每条边的代价都为\(1\),然后必须在\(G\)的对应点上走一条边以恢复体力。若当前对应点没有出边,则停留在该点\(1\)代价。求每个点到\(n\)的最小代价。Sol考......
  • ICLR2024 | iTransformer: 倒置Transformer,刷新时序预测新纪录
    目录:1、引言---1.1 问题背景---1.2设计思路  2、相关工作---2.1Transformer系预测模型---2.2多变量时序数据的词构建3、iTransformer---3.1模型结构---3.2以变量为主体的特征表示---3.3模块分析4、实验分析---4.1时序预测---4.2框架能力1、引言 近......
  • NOIP2024模拟赛13:拆开未来
    NOIP2024模拟赛13:拆开未来C-重复一句话题意:给定字符串\(S\),问\(S\)的所有子串共有多少种“好的拆分方案”。对于一个字符串\(S\),一个划分是好的当且仅当能把\(S\)划分成6个非空子串\(a,b,c,d,e\),满足\(a=b=e,\c=f\)(一个字符串可能有多种划分方式)标签:......
  • ctfshow 2023 愚人杯 web
    easy_signin观察url,发现base64,进行解码,原来可以访问文件路径,那我们访问一下index.php?img=aW5kZXgucGhw查看源代码发现还是base64解码得到flag被遗忘的反序列化<?php#当前目录中有一个txt文件哦error_reporting(0);show_source(__FILE__);include("check.p......