快速上手

📦 安装

// 从公司verdaccio私服安装组件库
npm i win-design --registry http://172.16.0.115:4873

🧀 使用

// main.js 入口文件
import WinDesign from 'win-design'
import 'win-design/lib/themes/default.css' // 默认主题样式文件
import 'win-design/lib/themes/fonts/iconx.js' // 如果你需要使用行业图标

Vue.use(WinDesign)

win-design的开发使用了大量的ES6语法, 如果需要兼容IE系列浏览器, 出现JS语法不兼容的情况时(vue-cli3.0已实现兼容), 开发者需自行下载babel-polyfill依赖, 解决语法的兼容性问题。

npm i babel-polyfill // 解决es6语法低版本浏览器不兼容的问题

// main.js 入口文件
import 'babel-polyfill' // 解决IE10+兼容问题

✌ 按需引入

开发者可以按需引入指定的组件，从而达到减小项目最终打包体积的目的。

第一种方式：基础用法

在不使用插件的情况下，开发者需要引入组件对应的资源文件，*.js，*.css，其他依赖文件。大致的使用情况如下：

import {Input, Checkbox, DatePicker, Iconx, Loading} from 'win-design'

// 样式文件

import 'win-design/lib/themes/input.css'
import 'win-design/lib/themes/checkout.css'
import 'win-design/lib/themes/date-picker.css'
import 'win-design/lib/themes/iconx.css'
import 'win-design/lib/themes/loading.css'

// 行业图标iconx依赖文件
import 'win-design/lib/themes/fonts/iconx'

// 通用字体图标
import 'win-design/lib/themes/icons.css'

// 注册组件
Vue.component(Input.name, Input)
Vue.component(Checkbox.name, Checkbox)
Vue.component(DatePicker.name, DatePicker)
Vue.component(Iconx.name, Iconx)

// 注册指令或方法
Vue.use(Loading.directive)
Vue.prototype.$Loading = Loading.service

/* 或写为
 * Vue.use(Input)
 * Vue.use(Checkbox)
 */

WARNING

少量组件按需引入时，推荐基础用法，一旦引入组件较多时，就需要手动引入非常多的依赖文件，这时候推荐使用@win-design/babel-plugin-import插件优雅地实现按需引入。

第二种方式：使用@win-design/babel-plugin-import插件

Step 1：安装插件

npm i @win-design/babel-plugin-import -D --registry http://172.16.0.115:4873

Step 2：修改babel配置文件

vue-cli 2.0需要修改.babelrc.js，vue-cli 3.0则需要修改babel.config.js

// 以下为@win-design/babel-plugin-import默认配置
module.exports = {
  ...
  plugins: [
    ["@win-design/babel-plugin-import", {
      libraryName: "win-design", // 组件库名称
      componentsPath: "lib", // 插件路径
      stylePath: "lib/themes", // 样式路径
      suffix: "css" // 样式后缀
    }]
  ]
}

Step 3：按需引入

// 引入组件
import {Input, Checkbox, DatePicker, Iconx} from 'win-design'

// 注册组件
Vue.use(Input)
Vue.use(Checkbox)
Vue.use(DatePicker)
Vue.use(Iconx)

完整的组件列表与引入方式

WARNING

PS: (完整组件内容仍以components.json为准，减少因更新不及时造成不必要的错误)

import Vue from 'vue'
import 'win-design/lib/themes/icons.css' // 通用字体图标样式
import
  Collapse,
  CollapseItem,
  Counter,
  Breadcrumb,
  BreadcrumbItem,
  Tag,
  Container,
  Header,
  Footer,
  Main,
  Aside,
  Affix,
  Alert,
  Iconx,
  Button,
  ButtonGroup,
  Radio,
  RadioButton,
  RadioGroup,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Row,
  Col,
  Input,
  InputNumber,
  Popover,
  Switch,
  Tree,
  InputSuggestion,
  Tooltip,
  Step,
  Steps,
  Pagination,
  Form,
  FormItem,
  Dropdown,
  DropdownMenu,
  DropdownMenuItem,
  Modal,
  Popconfirm,
  Timeline,
  TimelineItem,
  Link,
  Anchor,
  DatePicker,
  TimePicker,
  TimeSelect,
  Scrollbar,
  Select,
  SelectMenu,
  OptionGroup,
  Option,
  Table,
  TableColumn,
  Tabs,
  TabPane,
  Drawer,
  Menu,
  MenuItem,
  Submenu,
  MenuGroup,
  Skeleton,
  TreeSelect,
  Progress,
  Cascader,
  Upload,
  Avatar,
  Badge,
  Slider,
  InfiniteScroll,
  Carousel,
  CarouselItem
  ...
  } from 'win-design'

  Vue.use(Collapse)
  Vue.use(CollapseItem)
  Vue.use(Counter)
  Vue.use(Breadcrumb)
  Vue.use(BreadcrumbItem)
  Vue.use(Tag)
  Vue.use(Container)
  Vue.use(Header)
  Vue.use(Footer)
  Vue.use(Main)
  Vue.use(Aside)
  Vue.use(Affix)
  Vue.use(Alert)
  Vue.use(Iconx)
  Vue.use(Button)
  Vue.use(ButtonGroup)
  Vue.use(Radio)
  Vue.use(RadioButton)
  Vue.use(RadioGroup)
  Vue.use(Checkbox)
  Vue.use(CheckboxButton)
  Vue.use(CheckboxGroup)
  Vue.use(Row)
  Vue.use(Col)
  Vue.use(Input)
  Vue.use(InputNumber)
  Vue.use(Popover)
  Vue.use(Switch)
  Vue.use(Tree)
  Vue.use(InputSuggestion)
  Vue.use(Tooltip)
  Vue.use(Step)
  Vue.use(Steps)
  Vue.use(Pagination)
  Vue.use(Form)
  Vue.use(FormItem)
  Vue.use(Dropdown)
  Vue.use(DropdownMenu)
  Vue.use(DropdownMenuItem)
  Vue.use(Modal)
  Vue.use(Popconfirm)
  Vue.use(Timeline)
  Vue.use(TimelineItem)
  Vue.use(Link)
  Vue.use(Anchor)
  Vue.use(DatePicker)
  Vue.use(TimePicker)
  Vue.use(TimeSelect)
  Vue.use(Scrollbar)
  Vue.use(Select)
  Vue.use(SelectMenu)
  Vue.use(OptionGroup)
  Vue.use(Option)
  Vue.use(Table)
  Vue.use(TableColumn)
  Vue.use(Tabs)
  Vue.use(TabPane)
  Vue.use(Drawer)
  Vue.use(Menu)
  Vue.use(MenuItem)
  Vue.use(Submenu)
  Vue.use(MenuGroup)
  Vue.use(Skeleton)
  Vue.use(TreeSelect)
  Vue.use(Progress)
  Vue.use(Cascader)
  Vue.use(Upload)
  Vue.use(Avatar)
  Vue.use(Badge)
  Vue.use(Slider)
  Vue.use(InfiniteScroll)
  Vue.use(Carousel)
  Vue.use(CarouselItem)
  ...

  Vue.use(Loading.directive)
  Vue.prototype.$Loading = Loading.service
  Vue.prototype.$Message = Message
  Vue.prototype.$Msgbox = MessageBox
  Vue.prototype.$Alert = MessageBox.alert
  Vue.prototype.$Confirm = MessageBox.confirm
  Vue.prototype.$Prompt = MessageBox.prompt
  Vue.prototype.$Notify = Notification

✨ 管理npm源

为了方便包管理源的切换，建议开发者安装nrm插件对源进行管理。

// 安装
npm i -g nrm

// 查看源, *开头的就是当前所处的源
nrm ls

// 添加源
nrm add wnpm http://172.16.0.115:4873

// 切换源
nrm use wnpm

// 删除源
nrm del wnpm

更多使用请查看官方说明: nrm

# 快速上手

# 📦 安装

# 🧀 使用

# ✌ 按需引入

# 第一种方式：基础用法

# 第二种方式：使用@win-design/babel-plugin-import插件

# ✨ 管理npm源