快速上手 | JView UI

🚀安装 JView UI

bash

npm install jview-ui
# OR
yarn add jview-ui
# OR
pnpm add jview-ui

npm install jview-ui
# OR
yarn add jview-ui
# OR
pnpm add jview-ui

👉查看组件

⚙️使用组件

全局完整引入

完整引入会在全局引入 JView UI 的所有组件，这简化了用法，但是也会增大项目打包后的体积。

typescript

// main.ts
import { createApp } from 'vue';
// 引入组件库
import JView from "jview-ui"
// 样式需要单独引入
import "jview/dist/style.css"
import App from './App';

const app = createApp(App);
// 通过 use 使用整个组件库
app.use(JView).mount('#app');

// main.ts
import { createApp } from 'vue';
// 引入组件库
import JView from "jview-ui"
// 样式需要单独引入
import "jview/dist/style.css"
import App from './App';

const app = createApp(App);
// 通过 use 使用整个组件库
app.use(JView).mount('#app');

我们还是推荐按需引入的方式，请往下看！

【推荐】自动按需引入

TIP

配合unplugin-vue-components实现自动按需引入，免去了全局注册或者局部注册的繁琐，同时也不需要考虑按需引入。

unplugin-vue-components 能够自动扫描模板中的组件标签，根据 resolver 自动按需引入组件，并生成components.d.ts文件提供类型支持。

我们提供了用于 JView UI 的 Resolver，你完全可以一键引入使用！

首先安装相关依赖：

pnpm add unplugin-vue-components @jview/unplugin -D

pnpm add unplugin-vue-components @jview/unplugin -D

vite.config.ts配置如下：

import Components from "unplugin-vue-components/vite";
import { JViewUIResolver } from "@jview/unplugin";

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        JViewUIResolver(),
      ],
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

import Components from "unplugin-vue-components/vite";
import { JViewUIResolver } from "@jview/unplugin";

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        JViewUIResolver(),
      ],
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

组件使用时，无需通过use或者components再次注册，可以直接在模板中使用。
如果您是 webpack 用户，则配置如下：

// vue.config.js

const Components = require("unplugin-vue-components/webpack");
const { JViewUIResolver } = require("@jview/unplugin");

module.exports = {
  // 其他配置
  // ...
  configureWebpack: {
    plugins: [
      // 其他插件
      // ...
      Components({
        resolvers: [JViewUIResolver()],
      }),
    ],
  }
}

// vue.config.js

const Components = require("unplugin-vue-components/webpack");
const { JViewUIResolver } = require("@jview/unplugin");

module.exports = {
  // 其他配置
  // ...
  configureWebpack: {
    plugins: [
      // 其他插件
      // ...
      Components({
        resolvers: [JViewUIResolver()],
      }),
    ],
  }
}

对于使用 API 调用的组件（比如 Message, Notification），必须在入口文件处（一般是main.ts或者main.js）引入相关样式，因为它们无法被 unplugin 插件扫描到。

typescript

// main.ts 
import "jview-ui/es/message/style";
import "jview-ui/es/notification/style";

// main.ts 
import "jview-ui/es/message/style";
import "jview-ui/es/notification/style";

局部注册

以Button组件为例说明。

首先引入并局部注册组件：

import { defineComponent } from 'vue';
// 引入组件
import { Button } from "jview-ui";
// 引入样式
import "jview-ui/es/button/style";

export defineComponent({
  components: {
    // 注册组件
    Button
  }
})

import { defineComponent } from 'vue';
// 引入组件
import { Button } from "jview-ui";
// 引入样式
import "jview-ui/es/button/style";

export defineComponent({
  components: {
    // 注册组件
    Button
  }
})

如果您不希望为每个组件单独引入样式，建议采用上文所述的 unplugin-vue-components 方案（支持 Vite 和 Webpack）。Webpack 体系下也可以采用 babel-plugin-import。

// 参考的 babel 配置：
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "jview-ui",
        libraryDirectory: "es",
        style: true,
      },
    ],
  ],
};

// 参考的 babel 配置：
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "jview-ui",
        libraryDirectory: "es",
        style: true,
      },
    ],
  ],
};

模板使用：

vue

<j-button type="primary">按钮</j-button>

<j-button type="primary">按钮</j-button>

TIP

当然也支持在 JSX/TSX 中使用。😄

全局注册

【推荐】可以全局注册某个组件

import { createApp } from "vue";
// 引入组件
import { Button } from "jview-ui";
// 引入样式
import "jview-ui/es/button/style";

const app = createApp();

// 全局注册 Button 组件
app.use(Button);

import { createApp } from "vue";
// 引入组件
import { Button } from "jview-ui";
// 引入样式
import "jview-ui/es/button/style";

const app = createApp();

// 全局注册 Button 组件
app.use(Button);

【不建议】也可以全局注册所有组件

import { createApp } from "vue";
// 引入组件库
import JViewUI from "jview-ui";
// 引入样式
import "jview-ui/dist/style.css";

const app = createApp();

// 全部引入，会导致包体积较大
app.use(JViewUI);

import { createApp } from "vue";
// 引入组件库
import JViewUI from "jview-ui";
// 引入样式
import "jview-ui/dist/style.css";

const app = createApp();

// 全部引入，会导致包体积较大
app.use(JViewUI);

🚀安装 JView UI ​

⚙️使用组件 ​

全局完整引入 ​

【推荐】自动按需引入 ​

局部注册 ​

全局注册 ​