wl-ui-vue

如何使用wl-ui-vue

wl-ui-vue文件目录

wl-ui-vue
├─ config
│  ├─ webpack.build.js //用作打包web服务的配置文件，输出dist文件夹
│  ├─ webpack.dev.js //用作本地开发的配置文件
│  └─ webpack.npm.js //用作打包npm包的配置文件，输出lib
├─ dist //打包后的web服务包
├─ lib //打包后的npm包
├─ node_modules
├─ src
│  ├─ assets
│  │    ├─ css
│  │    ├─ font 
│  │    └─ img
│  ├─ examples //存放演示页面文件夹
│  ├─ plugin
│  │    ├─ assets
│  │    │    └─ scss //可以统一管理组件的css样式
│  │    ├─ components  //所有组件写在这个文件夹
│  │    │      └─ index.js //组件入口
│  │    ├─ index.js //统一处理组件
│  │    └─ style.js //样式入口
│  ├─ router 
│  │    └─ index.js
│  ├─ App.vue
│  └─ main.js 
├─ .babelrc
├─ .gitignore
├─ index.html
├─ package.json
└─ README.md

关于npm发包问题，自行决解，问题也很简单，不懂就多查找资料吧。

快速入门教程

# npm安装
npm install wl-ui-vue --save-dev

# 项目中引入
import Vue from 'vue'
import Wl from 'wl-ui-vue'
import 'wl-ui-vue/lib/wl.css'
Vue.use(Wl)

# 组件使用示例
<wl-button>默认按钮</wl-button>

# 安装
npm install

# 运行项目
npm run dev

# 打包web服务命令
npm run build 

# 打包npm包命令
npm run package