J-view-uniapp NPM

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" // 建议安装
    ]
  }
}