# syedu [![npm](https://img.shields.io/npm/v/syedu.svg?style=flat-square)](https://www.npmjs.com/package/syedu)


## Documentation
Document and Live demo: [http://ui.syedu.tech](http://ui.syedu.tech/)


syedu 设计的初衷是为了补充业务组件库，建议配合其他组件库使用，不建议全局引入！


## 安装
``` shell
npm i syedu -S
```

## 完整引入

> 引入编译过后的组件库
```
import Vue from 'vue'
import syedu from 'syedu'
import 'syedu/lib/syedu.css'
Vue.use(syedu)
```
> 未编译的组件库
```
import Vue from 'vue'
import syedu from 'syedu/packages'
Vue.use(syedu)
```


## 单独引入 $ext
```javascript
import Vue from 'vue'
import VueExt from 'syedu/packages/vue-ext'
Vue.use(VueExt, globalVueOptions) // Vue.prototype.$ext, this.$ext
```
* `globalVueOptions`： eg: `{ axios, store, router }`

> Usage
 ```
 // 挂载组件, 其中 vueOptions 的值可以覆盖 globalVueOptions
 let componentInstance = this.$ext.mount(Component, componentOptions, vueOptions)
 // 卸载组件
 this.$ext.unmount(componentInstance)
 ```


## 支持 Rem
```
npm i amfe-flexible -S
npm i postcss-pxtorem -D 
```

`vue.config.js` | `nust.config.js`
```javascript
module.exports = {
  devServer: {},
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        prependData: `@import "./examples/assets/stylesheets/scss/default.scss";`
      },
      // 适配移动端
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 75, // 根大小750
            propList: ['*'], // 属性的选择器，*表示通用
            selectorBlackList: ['.px-'], //   忽略的选择器   .ig-  表示 .ig- 开头的都不会转换
          })
        ],
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) { }
      }
    }
  }
}
```
`main.js`
```
import 'amfe-flexible'
```