vui

a ui framework build with vue for pc。 Demo

目的

主要是为深入学习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文件中，需要额外设置一下字体文件打包的路径，才能把字体文件打包到预想位置

//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=""