yc-ui

旅居云创UED Vue组件

快速上手

通过npm安装

npm install yc-ui --save

全局加载

// 引入组件
import YcUI from 'yc-ui'
import 'yc-ui/dist/style/index.css' // or 'yc-ui/src/styles/index.less'

// 全局注册
Vue.use(YcUI)

按需加载

按需引用是直接引用的组件库源代码，需要借助 babel 进行编译，以 webpack 为例：

module: {
  rules: [
    { test: /yc-ui.src.*?js$/, loader: 'babel-loader' },
    { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
  ]
}

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test'), resolve('node_modules/yc-ui/src')]
    }
  ]
}

import Button from 'yc-ui/src/components/button'
import 'yc-ui/src/components/button/style.less' 

Vue.component(Button.name, Button)

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

import { Button } from 'yc-ui'

Vue.component(Button.name, Button)

插件会帮你转换成 yc-ui/src/components/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

使用前需要在 .babelrc 文件中配置 babel-plugin-import

 "plugins": [
    ["import", {
      "libraryName": "yc-ui",
      "libraryDirectory": "src/components",
      "style": true
    }]
  ]

定制样式

1) modifyVars（推荐）

利用 less-loader 的 modifyVars 配置来覆盖原来的样式变量

2) 覆盖less

用 less 文件进行变量覆盖。 建立一个单独的 less 文件如下，再引入这个文件。

@import "~yc-ui/src/styles/index.less";   // 引入官方提供的 less 样式入口文件
@import "your-theme-file.less";   // 用于覆盖上面定义的变量

注意：这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。