nw-design

Appearance

Return to top
On this page

快速上手

@nw-design/ui为封装的常用组件库

在开始之前，由于大部分组件都是基于ant-design-vue,所以首先需要安装ant-design-vue,样式文件暂时打包进封装的@nw-design/ui

安装

你可以选择npm, yarn, pnpm 安装

TIP

组件库的peerDependencies有 @ant-design/icons-vue,@vueuse/core,ant-design-vue,lodash-es,resize-observer-polyfill,vue所以你需要提前安装它们

bash
# 选择一个包管理器

# NPM
npm install @nw-design/ui --save

# Yarn
yarn add @nw-design/ui

# pnpm
pnpm install @nw-design/ui

使用组件

该组件库没有把ant-design-vue组件库的样式文件打包，所以使用先需要先引入以下组件

import {Button, Menu,Divider,Popover,Modal,Tooltip} from 'ant-design-vue'
app.use(Button).use(Menu).use(Divider).use(Popover).use(Modal).use(Tooltip)

全局完整注册

ts
import { createApp } from 'vue';
import nwui from '@nw-design/ui'
import App from './App';
import '@nw-design/ui/dist/es/style.css'
const app = createApp(App);
app.use(nwui).mount('#app');

局部注册组件

样式文件暂时全部在main.ts全局引入

ts
import {  ScrollBar } from '@nw-design/ui'
export default {
  components: {
   ScrollBar
  },
};