vue-element-web-asset
vue-element-web-asset
基于VUE和ElementUI的WEB开发公共组件/插件/工具/UI demo
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
使用
# install
npm install --save vue-element-web-asset
若出现 Refuse to delete xxx,则删除 node_modules,全部重新install
# import
import 'vue-element-web-asset/dist/vueAsset.css'
import VueAsset from 'vue-element-web-asset'
## 最简配置
Vue.use(VueAsset, options = {
third: {
qiniu: {
httpRequest: {
qiniuTokenUrl(type) {
return `http://xxx/${type}/qiniu_token`
}
}
}
}
})
Vue.use(VueAsset, options = {
// 环境配置
// false不覆盖
profile: {},
// 库配置
// false不覆盖
libs: {},
// 插件安装配置
// false不安装
plugins: {},
// 过滤器安装配置
// false不安装
filters: {},
// 组件安装配置
// false不安装
components: {},
// 第三方扩展配置
third: {},
// 工具类配置项
// false则不覆盖
utils: {}
})
# 配置项说明
const profile = {
// 图片域名
imgDomain: ''
}
const libs = {
// CKEDITOR,let CKEditor = libs.ckeditor || window.CKEDITOR || window.CKEditor || window.ckeitor
ckeditor: null
}
const plugins = {
// axios 插件配置
// false则不安装
axios: {
// axios.defaults
// false则不覆盖
defaults: {},
transformRequest: {
// 在transformRequest中展开array的数据
// false 不添加该拦截器
flatArray: false
},
transformResponse: {
// 在transformResponse中将返回的数据转换为驼峰格式
// false 不添加该拦截器
hump: true
},
interceptor: {
// GET禁用缓存, config.cache = true 跳过该拦截器
// false 不添加该拦截器
disableCache: true,
// config.contentType = 'form' 支持post/put/patch 的表单提交方式
// false 不添加该拦截器
applicationForm: true,
// ajax开始时显示loading,最后一个ajax结束时关闭loading, config.loading = false 跳过该拦截器
// false 不添加该拦截器
loading: true,
// 只返回response.data,该拦截器必须放置在所有response拦截器的最后,config.dataOnly = false 跳过该拦截器
// false 不添加该拦截器
returnResponseData: true,
// hmac 认证, config.mac !== false && config.headers.Authorization == null 时启用
// false 不添加该拦截器
authMac: {
MAC_ID: '2YotnFZFEjr1zCsicMWpAA',
MAC_KEY: 'mac_key',
SESSION_ID: 'session_id',
decode: true,
getMacKey() {
let macKey = VueCookie.get(this.MAC_KEY) || ''
return this.decode ? decodeURIComponent(macKey) : macKey
},
getSessionId() {
let sessionId = VueCookie.get(this.SESSION_ID) || ''
return this.decode ? decodeURIComponent(sessionId) : sessionId
}
},
// 全局错误处理,config.errorHandle = false 跳过该拦截器,config.handleError = false 跳过非异常处理(自定义业务错误时可设置该项)
// false 不添加该拦截器
errorHandle: {
// 全局错误处理器
errorHandle: error => {...}
},
// mock支持, config.mock === true 时启用
// false 不添加该拦截器
mock: {
// mock 的基本路径
baseURL: ''
},
// 请求api时,将数据的驼峰格式转换为下划线格式,config.dataToUnderline = false 跳过该拦截器
// false 不添加该拦截器
dataToUnderline: true,
// remove值为空的请求参数,config.removeEmpty = true 时启用
// false 不添加该拦截器
removeEmpty: {}
}
}
}
const filters = {
// 日期格式化过滤器
// false则不安装
date: true,
// 货币格式化过滤器
// false则不安装
currency: true,
// 数组/对象取值过滤器
// false则不安装
value: true,
// 图片url域名补全过滤器
// false则不安装
url: true
}
const components = {
// 富文本编辑器[at-editor]
// false则不安装
editor: {},
// 图片预览, Vue.prototype.showPreview(imgSrc)
// false则不安装
messageBox: {},
// Modal[at-modal]
// false则不安装
modal: {},
// 扩展Vue实例的提示方法,
// Vue.prototype.[success/info/warning/danger] => elementUI.Notification, 定义了一些默认项
// false则不安装
notify: {},
// 文件/图片上传[at-upload, at-image-upload]
// 提供的配置将会替换组件props的默认值
// false则不安装
upload: {
// 文件上传组件, 配置项将覆盖原来的props, 具体配置参考elementUI的upload上传组件, 通常只需要提供上传action
// false则不安装
upload: {},
// 图片上传组件, 配置项将覆盖原来的props, 具体配置参考upload组件, 通常只需要提供图片上传action
// 只有安装了upload,才能安装imageUpload
// false则不安装
imageUpload: {}
},
// 扩展Vue实例加载中方法
// Vue.prototype.showLoading 显示加载中动画, Vue.prototype.hideLoading 关闭加载中动画
// false则不安装
loader: {}
}
const third = {
qiniu: {
httpRequest: {
/**
* 七牛上传配置URL
* @param {*} type
*/
qiniuTokenUrl(type) {
return `/xxx/${type}/qiniu_token`
},
/**
* 获取七牛上传配置
* @param {*} type 1-图片
*/
getServerConfig(type = 1) {
return axios({
url: this.qiniuTokenUrl(type),
method: 'GET',
responseType: 'json'
}).then(data => {
return {
domain: data.domainUrl,
zoneUrl: this.getZoneUrl(data.qiniuZone.upUrls),
token: data.token
}
})
},
/**
* 取七牛上传地址
* @param {*} qiniuZone
*/
getZoneUrl(qiniuZone) {
if (Array.isArray(qiniuZone)) {
let len = qiniuZone.length
return qiniuZone[randRange(0, len - 1)]
}
return String(qiniuZone)
}
}
}
}
const utils = {
fmt: {
// 日期格式化
date: {
format: 'yyyy-MM-dd hh:mm:ss'
},
// 货币格式化
currency: {
// 小数点保留位数
places: 2,
// 货币标识
symbol: '¥',
// 每千位分隔符
thousand: ', ',
// 小数点
decimal: '.'
}
},
// hmac 认证, 无特殊需要请勿修改默认配置
authMac: {
// RequestContent的数据分隔符
requestContentSymbol: '\n',
// Mac的数据分隔符
authMacSymbol: 'MAC',
// 随机字符串位数
nonceLen: 8
}
}
For detailed explanation on how things work, consult the docs for vue-loader.
Dependencies
Dependencies
babel-core: ^6.22.1babel-eslint: ^7.1.1babel-helper-vue-jsx-merge-props: ^2.0.2babel-loader: ^7.1.1babel-plugin-component: ^0.10.1babel-plugin-istanbul: ^4.1.1babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-runtime: ^6.22.0babel-plugin-transform-vue-jsx: ^3.5.0babel-preset-env: ^1.3.2babel-preset-es2015: ^6.24.1babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0cross-env: ^5.0.5crypto-js: ^3.1.9-1css-loader: ^0.28.7extract-text-webpack-plugin: ^2.0.0file-loader: ^1.1.4flexibility: ^2.0.1html-webpack-plugin: ^2.28.0node-sass: ^4.7.2resolve-url-loader: ^2.2.1sass-loader: ^6.0.6style-loader: ^0.14.0url-loader: ^0.5.9vue-loader: ^13.0.5vue-router: ^2.2.0vue-template-compiler: ^2.4.4webpack: ^3.10.0webpack-dev-server: ^2.9.1vue: ^2.4.4axios: ^0.17.1element-ui: ^2.0.8