Git Product home page Git Product logo

vui's Introduction

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

vui's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.