j-view-uniapp
v0.0.20
Published
presonal uniapp components
Downloads
24
Readme
j-view-uniapp
j-view-uniapp 封装了个人使用的组件和工具。 j-view-uniapp 依赖 uni-ui 且只支持 vue3 + vite + typescript。 项目使用 unocss 进行样式处理。
安装
pnpm add j-view-uniapp @dcloudio/uni-ui vue-i18n
pnpm add -D sass sass-loader unocss unocss-applet
unocss 配置
vite 启用 unocss :
// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import Unocss from 'unocss/vite';
export default defineConfig({
plugins: [uni(), Unocss()],
});
通过 ~~~unocss.config.ts~~~ 进行 unocss 配置
import {
defineConfig,
presetAttributify,
transformerDirectives,
transformerVariantGroup,
} from 'unocss';
import {
presetJViewUniapp,
presetRemToRpx,
transformerApplet,
transformerAttributify,
} from 'j-view-uniapp/uno-preset/index';
// UniApp
const isApplet = !(process?.env?.UNI_PLATFORM === 'h5');
export default defineConfig({
presets: [
presetJViewUniapp({ enable: isApplet }),
presetAttributify(),
presetRemToRpx({ enable: isApplet }),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
// Don't change the following order
transformerAttributify({ enable: isApplet }),
transformerApplet({ enable: isApplet }),
],
});
在项目 main.ts 引入样式文件
// src/main.ts
// reset
import 'j-view-uniapp/styles/reset.css';
// jview extra css
import 'j-view-uniapp/styles/jview.css';
// uno
import 'uno.css';
在 nvue 页面中使用 unocss
1、使用 vite-plugin-uni-twucss 插件:https://github.com/maitel2020/vite-plugin-uni-twucss 2、在 app-nvue 中只支持 @apply 写法:https://github.com/unocss/unocss/tree/main/packages/transformer-directives 3、nvue 中可用的 css 样式以及默认行为和 vue 页面有差异:https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html
组件 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点:
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
"^Uni(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
// j-view 组件
"^j-(.*)": "j-view-uniapp/components/j-$1/j-$1.vue",
"^J(.*)": "j-view-uniapp/components/j-$1/j-$1.vue"
}
},
// 其他内容
"pages": [
// ...
]
}
组件 types
// tsconfig.json
{
"compilerOptions": {
"types": [
"j-view-uniapp",
"@dcloudio/types", // 建议安装
"@uni-helper/uni-app-types", // 建议
"@uni-helper/uni-ui-types" // 建议安装
]
}
}
其它注意事项
https://github.com/dcloudio/uni-ui