syedu

Documentation

Document and Live demo: http://ui.syedu.tech

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

安装

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

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

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'