当前位置：首页 > news >正文

uni-app总结4-项目配置+HBuilder插件使用+uni插件使用

news 2025/6/20 8:02:26

这篇文章将介绍uni-app开发过程中的部分项目配置（vite、自动化测试、unocss配置等）、HBuilderX插件使用（Prettier、github copilot等）以及uni插件使用（原生插件、UTS插件）。

一、项目配置

1. vite环境配置

1. 通过pnpm安装vite：pnpm add vite

2. 新增vite.config.js配置文件，引入uni并设置为plugin

2. 自动化测试配置(jest + vue test utils)

1. 通过pnpm添加相关依赖：

npm install --save-dev jest @vue/test-utils@next @vue/vue3-jest @babel/preset-env babel-jest jest-environment-jsdom

@vue/test-utils@next是给vue3使用的，如果是vue2.0直接使用稳定版

@vue/vue3-jeest也是专门给vue3使用的，如果是vue2.0使用@vue/vue-jest

jest-environment-jsdom是给jest测试时模拟dom环境的的

2. 新建babel.config.js文件或者是.babelrc文件，增加设置

module.exports = {presets: [['@babel/preset-env',{targets: {node: 'current'}}]]
};

3. 配置jest.config.js文件

新建一个jest.setup.js文件，配置如下：

module.exports = {

// 转换规则 transform: {

'^.+\.vue$': '@vue/vue3-jest',

'^.+\.js$': 'babel-jest'

// 处理的文件扩展名 moduleFileExtensions: ['vue', 'js', 'json'],

// 查找测试文件的规则 testMatch: [

'**/tests/*.spec.js'

// 收集代码覆盖率 collectCoverage: true,

// 代码覆盖率报告格式 coverageReporters: ['html', 'text-summary'],

setupFiles: ['./jest.setup.js'],

testEnvironment: 'jsdom',

//一直提示Vue is not defined，添加下面这个红色部分就解决了

"testEnvironmentOptions": {

"customExportConditions": ["node", "node-addons"]

}

};

4. 配置jest.setup.js文件

新建一个jest.setup.js文件，文件配置如下：

global.uni = {

showToast: jest.fn(),

navigateTo: jest.fn()

// 可以根据需要添加更多模拟的API

};

global.window = {};

global.document = {};

// 其他必要的全局变量模拟

5. 测试用例编写

import MyComponent from './MyComponent.vue';

import {

mount

} from '@vue/test-utils';

describe('MyComponent', () => {

it('renders the correct message', () => {

const wrapper = mount(MyComponent);

expect(wrapper.text()).toContain('Hello, Vue 3!');

});

6. 在package.json中设置script，并通过terminal运行测试用例

package.json中增加script:

"scripts": {

"test": "jest"

terminal重通过指令来运行测试用例：

npm test

3. unocss配置

1. 首先通过pnpm继承unocss：pnpm add unocss

2. 在main.js 导入unocss: import 'uno.css'

3. 在vite.config.js中将unocss添加到plugins中并指定config文件

4. 创建unocss.config.js配置文件，设置一些预设

import presetWeapp from 'unocss-preset-weapp'
import {transformerClass,transformerAttributify
} from 'unocss-preset-weapp/transformer';
import {presetIcons,presetAttributify
} from "unocss"
export default ({presets: [presetWeapp(),presetIcons(),presetAttributify({prefix: "un-",prefixedOnly: false})],rules: [[/^size-(\d+)$/, ([, d]) => ({width: `${d}rpx`,height: `${d}rpx`})],],transformers: [transformerAttributify(),transformerClass()],//自定义缩写shortcuts: [{'border-base': 'border-[2rpx] border-gray-500_10 border-solid','center': 'flex justify-center items-center','size-alert': 'w-[600rpx] h-[400rpx]'}],//自定义样式theme: {color: {blue: 'rgba(22, 33, 255, 1)',red: '#e74c3c',sun: '#f1c40f',green: '#16a085',},border: {blue: 'rgba(22, 33, 255, 1)',red: '#e74c3c',sun: '#f1c40f',green: '#16a085',},},
})