WinDesign

# 快速上手

# 📦 安装

WARNING

WinDesign 自 2.0 版本之后, 将不再同步更新到「http://172.16.0.115:4873/」, 后续版本将统一发布到「http://172.16.9.57:8081/repository/npm-group/」, 请开发者特别注意。

WinDesign 组件库包发布在公司内部服务器中, 为了避免每次安装都需要指定registry的麻烦, 推荐开发者使用nrm对 npm 源进行管理。




// 从私服安装组件库
npm i win-design@2.4.37 --registry http://172.16.9.57:8081/repository/npm-group/
1
2

# 🧀 使用




 















// main.js 入口文件
import WinDesign from 'win-design'
// 默认主题样式文件(内置16套主题，可在『主题定制』中了解详细情况)
import 'win-design/lib/themes/default.css'

// 如果你需要使用行业图标
import 'win-design/lib/themes/iconx.css'
import 'win-design/lib/themes/fonts/iconx.js'

// 如果你需要使用行业标识
import 'win-design/lib/themes/iconi.css'
import 'win-design/lib/themes/fonts/iconi.js'

// 如果你需要使用内置多色头像
import 'win-design/lib/themes/fonts/avatars.js'

// 注册
Vue.use(WinDesign)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# ⚠️⚠️⚠️ WiNEX 框架下还需要这样做

@font-face {
  font-family: w-icons;
  src: url('/web-public/win-design/fonts/icons.woff') format('woff'), url('/web-public/win-design/fonts/icons.ttf')
      format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal;
}
1
2
3
4
5
6
7
i18nScope.ready(() => {
  const lang = sessionStorage.getItem('language') || 'zh_CN'
  // WinDesign 组件库需升级至 V2.4.32 以上
  Vue.use(WinDesign, { lang })
})
1
2
3
4
5

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




 

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

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

# ✌ 按需引入

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

# 第一种方式：基础用法

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




 











































/**
 * Input - 一般组件
 * Avatar - 一般组件性质 + 内置多色图标头像
 * Iconx -  行业图标组件
 * Iconi -  行业标识组件
 * Loading - 全局指令性组件
 * Message - 全局性方法组件
 **/
// 引入组件文件
import { Input, Avatar, Iconx, Iconi, Loading, Message } from 'win-design'

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

// 单个组件样式文件
import 'win-design/lib/themes/input.css'
import 'win-design/lib/themes/avatar.css'

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

// 行业标识iconi依赖文件
import 'win-design/lib/themes/iconi.css'
import 'win-design/lib/themes/fonts/iconi.js'

// 内置多色头像依赖文件
import 'win-design/lib/themes/fonts/avatars.js'

import 'win-design/lib/themes/loading.css'
import 'win-design/lib/themes/message.css'

// 一般组件的注册方式
Vue.component(Input.name, Input)
Vue.component(Iconx.name, Iconx)
Vue.component(Iconi.name, Iconi)
Vue.component(Avatar.name, Avatar)
// OR
// Vue.use(Input)

// 注册指令或方法
Vue.use(Loading.directive)

// 在Vue原型上挂载全局方法
Vue.prototype.$Loading = Loading.service
Vue.prototype.$Message = Message
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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.9.57:8081/repository/npm-group/
1

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" // 样式后缀
    }]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12

Step 3：按需引入




 






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

// 注册组件
Vue.use(Input)
Vue.use(Checkbox)
Vue.use(DatePicker)
Vue.use(Iconx)
Vue.use(Iconi)
1
2
3
4
5
6
7
8
9

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

WARNING

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




 



















































































































































































































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

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

// 行业标识iconi依赖文件
import 'win-design/lib/themes/iconi.css'
import 'win-design/lib/themes/fonts/iconi.js'

// 内置多色头像依赖文件
import 'win-design/lib/themes/fonts/avatars.js'

import
  Collapse,
  CollapseItem,
  Counter,
  Breadcrumb,
  BreadcrumbItem,
  Tag,
  Container,
  Header,
  Footer,
  Main,
  Aside,
  Affix,
  Alert,
  Iconx,
  Iconi,
  Button,
  ButtonGroup,
  Radio,
  RadioButton,
  RadioGroup,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Row,
  Col,
  Input,
  InputNumber,
  InputSearch,
  InputGroup,
  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,
  Result,
  Descriptions,
  DescriptionsItem,
  Watermark,
  Statistic,
  TableV2
  Tour,
  TourStep,
  CollapseTrigger,
  Empty,
  Space,
  LoadingBall,
  SeamlessScroll,
  TableSelect,
  Text,
  PageHeader,
  ...
  } 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(Iconi)
  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(InputSearch)
  Vue.use(InputGroup)
  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(Result)
  Vue.use(Descriptions)
  Vue.use(DescriptionsItem)
  Vue.use(Watermark)
  Vue.use(Statistic)
  Vue.use(TableV2)
  Vue.use(Tour)
  Vue.use(TourStep)
  Vue.use(CollapseTrigger)
  Vue.use(Empty)
  Vue.use(Space)
  Vue.use(LoadingBall)
  Vue.use(seamlessScroll)
  Vue.use(TableSelect)
  Vue.use(Text)
  Vue.use(PageHeader)
  ...

  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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214

# ✨ 管理 npm 源

为了方便包管理源的切换，建议开发者安装nrm插件对源进行管理。更多使用请查看官方说明: nrm




 












// 安装
npm i -g nrm

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

// 添加源
nrm add wnpm http://172.16.9.57:8081/repository/npm-group/

// 切换源
nrm use wnpm

// 删除源
nrm del wnpm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
上次更新: 12/25/2024, 9:59:46 AM

← 主题定制 →