https://github.com/2ue/vui
一个基于VUE的简易框架。a ui framework build with vue。
https://github.com/2ue/vui
component css javascript ui vue vui
Last synced: 11 months ago
JSON representation
一个基于VUE的简易框架。a ui framework build with vue。
- Host: GitHub
- URL: https://github.com/2ue/vui
- Owner: 2ue
- License: mit
- Created: 2017-09-06T07:29:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-26T11:20:34.000Z (about 7 years ago)
- Last Synced: 2025-04-04T20:23:13.235Z (about 1 year ago)
- Topics: component, css, javascript, ui, vue, vui
- Language: JavaScript
- Homepage: https://2ue.github.io/vui
- Size: 2.92 MB
- Stars: 19
- Watchers: 1
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vui
a ui framework build with vue for pc。
[Demo](https://2ue.github.io/vui)
# 目的
主要是为深入学习vue
# css变量命名规则
## 通用规则
- 所有命名都应添加前缀`vui`，以避免命名冲突
- 以中划线（-）链接
## 汉英对照
- 弹窗-pop up
- 遮罩-shade
- 模态-modal
- 模态框-modal dialog
## box 层级
- warp
- box
- inner(body)
- header/content(body)/footer
## layout 关系
> 与box结合
# 进度
- alert
- loadding
- icon
- button
- checkbox
- raido
- switch
- datepicker[基础版已完成]
- 多级菜单
- 联动选择[正在开发]
# 记录问题
> 记录开发过程中遇到的问题，避免下次踩坑
## 编译字体文件路径问题
编译时，由于字体路径写在了css文件中，需要额外设置一下字体文件打包的路径，才能把字体文件打包到预想位置
``` javascript
//webpack.base.conf.js
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
//http://blog.csdn.net/qq_38652603/article/details/73835153
publicPath: '../'
}
}
```
## 子组件监听父组件数据
父组件向子组件传递的参数，为了不造成数据污染，子组件不会自动的监听父组件数据的变化，但在某些情况下可能需要实现这一功，使用`watch`或者`computed`去显式的监听。两者都能达到目的，使用`computed`意味着在子组件内不能去显式的去修改它，使用`watch`则可以随意修改
## 预处理器变量全局穿透
> 定义一套变量，希望在任何地方都能使用
在vue-loader里面添加配置规则就可以了
## 如何不渲染一个HTML标签的属性
在vue渲染HTML标签属性（假设渲染a属性）时，属性值为undefined或者null不会被渲染出来（包括a都不会在标签上显示），如果为空字符串就会被渲染成a=""