@haloe-design/bview

bview

UI组件库，VUE版

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

# run dep  
npm run dep

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Build only bview

修改webpack打包配置，单独引入vue和bview

// webpack.config.js
 externals: {
      vue: 'Vue',
      ['bView']: 'bview',
  },

在index.html中显示引入bview

<script src="/static/vendor/dist/vue.min.js"></script>
<script src="/static/vendor/dist/iview.min.js"></script>
<script src="/static/vendor/dist/bview.min.dep.js"></script>
<link rel="stylesheet" href="/static/vendor/dist/style/bview.css" >

显示引入bview

// 引入bviw
import bView from 'bView'

Develop Guide.

代码结构

├── build                           #编译文件
    
├── config                          #编译的配置
      
├── dist                            #编译后文件
    
├── examples                        #组件开发示例工程
    
    ├── assets                      #静态资源
            
    ├── components                  #通用组件
                   
    ├── router                      #路由文件
                           
    ├── styles                      #样式文件
                    
    ├── views                       #组件示例页面
        
├── node_modules                    #依赖包文件夹
   
├──src                              #组件源代码
   
        ├── components              #组件目录
   
        ├── directives              #公用指令
               
        |—— locale                  #国际化语言
   
        ├── mixins                  #基本组件
               
        ├── styles                  #样式文件
        
            ├──common               #图标和字体
   
            ├── components          #自定义的组件样式
   
            |—— dark                #深色主题样式
   
            ├──iview-components     #原iview组件库样式（覆盖iview组件样式时需要）
   
            |—— mixins              #基础公共样式
            
            |—— colors.less         #颜色变量
            
            └── total.less          #样式入口文件
   
        |——utils                    #工具箱
   
        └── index.js                #入口文件
  
├── static                          #静态资源
  
├── types                           #组件API声明文件
  
├── .babelrc                        #babel配置文件
  
├── .editorconfig                   #编辑器配置文件    
  
└── ...                             #其他配置文件