ECN>> Doran>> 返回
项目作者： ximoThorn

项目描述 ：
Doran ui vue Ui 基于vue的一套ui组件库
高级语言： Vue
项目地址: git://github.com/ximoThorn/Doran.git
创建时间： 2019-11-02T03:47:20Z
项目社区：https://github.com/ximoThorn/Doran
开源协议：
下载


Doran-ui

基于vue(2.x)的一套中后台ui框架

注：因为没有经过系统的测试和推广，该ui目前仅供学习。
views目录是各个组件的使用demo

在线预览

全局引入

一般在 webpack 入口页面 main.js 中如下配置：

  1. import Vue from 'vue'
  2. import DoranUi from 'doran'
  3. import 'doran/dist/doran.css' // 引入css
  4. import App from './App.vue'
  6. Vue.use(DoranUi)
  8. new Vue({
  9.   render: h => h(App),
  10. }).$mount('#app')

按需引入

借助插件babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在项目根目录文件 .babelrc 中配置：

  1. npm install babel-plugin-import --save-dev // 安装

在.babelrc文件中

  1. {
  2.   "plugins": [["import", {
  3.     "libraryName": "doran",
  4.     "libraryDirectory": "dist/components"
  5.   }]]
  6. }

然后这样按需引入组件，就可以减小体积了：

  1. <template>
  2.   <div id="app">
  3.     <dr-button type="error">Doran</dr-button>
  4.     <dr-input placeholder="请输入"></dr-input>
  5.   </div>
  6. </template>
  8. <script>
  9. import { Button, Input } from 'doran'
  11. export default {
  12.   name: 'App',
  13.   components: {
  14.     DrButton: Button,
  15.     DrInput: Input
  16.   }
  17. }
  18. </script>

注意：按需引用仍然需要导入样式，即在 main.js中全局引入

Version

1.x

Completed components