这篇文章将介绍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',
},
},
})4. pnpm使用+patchs功能使用
- pnpm使用
1. 通过npm安装pnpm: npm install -g pnpm
2. 通过pnpm 安装依赖：pnpm add 插件名称 （指定版本用插件名称@1.2.0）
- pnpm的patchs功能使用
对第三方依赖做本地修改，打包patch，每次更新时会自动添加到新版本。可以做到本地修改的保留。
具体操作可以参考官方文档：pnpm patch <pkg> | pnpm
二、HBuilder插件安装
首先介绍下如何安装HBuilder插件。
点击顶部菜单中的“工具” --> "插件安装"-->“安装新插件”。也可以直接前往插件市场(DCloud 插件市场)然后选择HBuilderX分类，选择自己需要的插件进行安装。
1. Prettier代码格式化插件
先安装Prettier插件，然后可以通过新建.prettierrc.js文件自定义代码格式规则，此文件提交到git可以保证多人开发规则统一，不会让代码格式混乱。还可以额外新增.prettierignore文件，设置忽略哪些文不做自动格式化处理。
2. Github Copilot AI插件
这是一款AI编程协助插件，可以阅读代码上下文，给出代码提示。
只需在插件市场搜索安装即可使用。可在HbuilderX中“插件设置”里设置相关参数（比如代理等）
3. eslint-js/eslint-plugin-vue插件
代码错误检测及修复插件，在插件市场搜索安装即可。可在HbuilderX中“插件设置”里设置相关参数（比如保存时自动修复等）
三、uni插件使用
1. 原生插件使用
在插件市场搜索需要使用的原生插件，通过插件市场集成到项目里。在manifest文件-->原生插件配置中配置需要的信息。然后根据文档在页面中导入和使用。
2. UTS插件使用
在插件市场搜索需要使用的UTS插件，通过插件市场集成到项目里。UTS插件不需要再manifest中做任何配置，只需根据文档在页面中导入和使用即可。