1.0.7 • Published 10 months ago

jzt-jui v1.0.7

Weekly downloads
-
License
ISC
Repository
-
Last release
10 months ago

j-ui

使用包管理器

我们建议您使用包管理器(如 NPM、Yarn 或 pnpm)安装 j-ui

# 选择一个你喜欢的包管理器
# NPM
$ npm install j-ui --save

# Yarn
$ yarn add j-ui

# pnpm
$ pnpm install j-ui

完整引入

如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便,但你需要提前下载好相关组件的依赖。

// main.ts
import { createApp } from 'vue'
import BqDesign from "j-ui";
import "j-ui/dist/index.css";
import App from './App.vue'

const app = createApp(App)

app.use(BqDesign)
app.mount('#app')

按需引入 ⭐️

1、您需要使用额外的插件来导入要使用的组件。

首先你需要安装unplugin-vue-components

pnpm add  unplugin-vue-components -D

2、复制该解析器

const BqDesignResolver = () => {
    return {
        type: "component" as const,
        resolve: (name) => {
            if (name.startsWith("Bq")) {
                const pathName = name.slice(2).toLowerCase();
                return {
                    importName: name,
                    from: "j-ui",
                    path: `j-ui/lib/components/${pathName}/index.js`,
                    sideEffects: `j-ui/lib/components/${pathName}/${name.slice(2)}.css`,
                };
            }
        },
    };
};

3、在unplugin-vue-components引用该解析器

// vite.config.ts
import Components from "unplugin-vue-components/vite";
import { BqDesignResolver } from 'xxxx-你存储BqDesignResolver的文件'

export default defineConfig({
  // ...
  plugins: [
    Components({
        //...
      resolvers: [ 
         BqDesignResolver(),
      ],
    }),
  ],
})

手动导入

j-ui 提供了基于 ES Module 的开箱即用的Tree Shaking 功能。

但你需要加载该插件vite-plugin-import,解决本地开发时的动态加载、代码如下:

export default function importPlugin() {
    const regStr = /(?<!\/\/.*|\/\*[\s\S]*?\*\/\s*)import\s*{\s*([^{}]+)\s*}\s*from\s*['"]j-ui['"]/g;
    return {
        name: "vite-plugin-import",
        enforce: "pre",
        transform: (code: string, id: string) => {
            if (id.endsWith(".vue")) {
                const str = code.replaceAll(regStr, (match, imports) => {
                    const list = imports.split(",");
                    const pathList: string[] = [];
                    list.forEach((item: string) => {
                        item = item.trim();
                        const name = item.slice(2).charAt(0).toLowerCase() + item.slice(3);
                        const str = `import ${item.trim()} from 'j-ui/es/components/${name.trim()}';
                        import 'j-ui/es/components/${name.trim()}/${item.trim().slice(2)}.css'`;
                        pathList.push(str);
                    });
                    return pathList.join(";");
                });
                return str;
            }
            return code;
        },
    };
}

::: warning exclude中必须排除j-ui、因为 j-ui 存在第三方包,vite预加载会报错、当然如果已安装了j-ui所有组件需要的包、则不需要做该处理 :::

// vite.config.ts
import Components from "unplugin-vue-components/vite";
import ViteImportPlugin from "./src/utils/vite-plugin-import";

export default defineConfig({
    optimizeDeps:{
        exclude: ["j-ui"],
    },
  // ...
  plugins: [
     ViteImportPlugin(),
  ],
})

关于Webpack构建的项目

支持完整引入按需导入,但手动导入需要自行配置babel-plugin-import 详情见文档

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago