vue2-multi-page

简介

安装

# install dependencies
npm install
# serve with hot reload at localhost:8004
npm run dev
# build for production with minification
npm run build

技术构成

功能

目录结构

.
├── build // webpack 配置文件
├── config // webpack 生产及开发环境变量
├── dist // 线上文件夹
├── src // 开发目录
│  ├── api // api文件夹
│  │  ├── getdata.js // api接口js文件
│  ├── config // 基本配置文件夹
│  │  ├── ajax.js // Ajax请求js文件
│  │  ├── config.js // 引入公共的配置文件
│  │  ├── env.js // 环境配置文件
│  │  ├── utils.js // 公共的js文件
│  ├── directive // 指令文件夹
│  │  ├── el-drag-dialog // 某个指令文件夹
│  │  │  └── drag.js // 指令功能文件
│  │  │  └── index.js // 指令功能文件入口
│  ├── modules // 开发目录
│  │  ├── index // PC目录
│  │  │  ├── common // 基础模板
│  │  │  └── base.pug // 基础模板文件
│  │  │  └── commponents // 组件目录
│  │  │  └── common // 共用组件目录
│  │  │  └── audio.vue // 例如:音频组件
│  │  │  └── footer // 页面底部
│  │  │  └── header // 页面头部
│  │  │  └── pages // 页面目录
│  │  │  └── audio // 音频页面目录
│  │  │  └── children // 音频页面子组件目录
│  │  │  └── app.vue // 音频页面入口Vue
│  │  │  └── audio.js // 音频页面入口js
│  │  │  └── audio.pug // 音频页面入口pug文件
│  │  ├── phone // phone目录
│  ├── router // 路由文件夹
│  │  └── index.js // PC端路由配置文件
│  │  └── phone.js // Mobile端路由配置文件
│  └── script // 放置PC/Mobile分别共用及共同共用的JS文件
│  └── store // vuex目录文件
│  └── style // 放置PC/Mobile共用的Css文件
│  │  └── common // PC/Mobile共用的Css目录
│  │  └── index.scss // PC的Css文件
│  │  └── phone.scss // Mobile的Css文件
├── static // 静态目录
│  ├── assets // 第三方静态文件,主要放置不变的东西例如(Vue、Axios)
│  │  ├── axios-0.18.0 // 每一个第三方文件名增加版本号
│  ├── iconfont // 放置字体文件
│  ├── images // 放置图片
│  ├── lib // 放置自己封装的lib文件
│  ├── medias // 放置音频视频文件
.

编码命名规范

源码修改说明

1. element-ui

由: e.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser)
改为:e.prototype.updateLeafState=function(){if(!0===this.loaded||void 0===this.isLeafByUser)

由: handleClick(){... this.tree.$emit("node-click",this.node.data,this.node,this)} 
改为:handleClick(event){if(this.node.disabled) return;... this.tree.$emit("node-click",this.node.data,this.node,this,event)

由: handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.oldValue=null,this.resetValueIfNeed(e)}
改为:handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.oldValue=this.$parent.internalCurrentPage,this.resetValueIfNeed(e)}

由: i("li",{staticClass:"el-select-group__title"},[e._v(e._s(e.label))])
改为:i("li",{staticClass:"el-select-group__title"},[e._t("group_title", [e._v(e._s(e.label))])],2)

由: this.rateDisabled&&(e=(this.valueDecimal<50?0:50)+"%")
改为:this.rateDisabled&&(e=this.valueDecimal+"%")

由: handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node)
改为:handleClick:function(){var e=this.tree.store;if(this.node.disabled)return;e.setCurrentNode(this.node)

由: n.__IS__FLAT__OPTIONS&&(o=!0),n.disabled||(h.on.keydown=function(e){var i=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(i)<0))
改为:n.__IS__FLAT__OPTIONS&&(o=!0),(h.on.keydown=function(e){var i=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(i)<0))

2. mint-ui

由: startHour:{type:Number,default:0},endHour:{type:Number,default:23}}和
computed:{rims:function(){if(!this.currentValue)return{year:[],month:[],date:[],hour:[],min:[]};var t;return"time"===this.type?t={hour:[this.startHour,this.endHour],min:[0,59]}
改为:startHour:{type:Number,default:0},endHour:{type:Number,default:23},startMinute:{type:Number,default:0},endMinute:{type:Number,default:59}
computed:{rims:function(){if(!this.currentValue)return{year:[],month:[],date:[],hour:[],min:[]};var t;return"time"===this.type?t={hour:[this.startHour,this.endHour],min:[this.startMinute,this.endMinute]}

由: {staticClass:"picker-item",class:{"picker-selected":e===t.currentValue}
改为:{staticClass:"picker-item",class:{"picker-selected":e===t.currentValue,'picker-disabled':e['disabled']}

3. videojs

由: this.updateInterval=this.setInterval(function(){e.requestAnimationFrame(e.update)},30)}
改为:this.updateInterval=this.setInterval(function(){e.rafId_&&e.cancelAnimationFrame(e.rafId_),e.rafId_=e.requestAnimationFrame(e.update)},30)}

4. webupload

由: addBtn:function(b){var e=this,f=e.options,g=f.accept
改为:addBtn:function(b,acceptopt){var e=this,f=e.options,g=acceptopt||f.accept
由: acceptFile:function(a){var b=!a||!a.size||this.accept&&h.exec(a.name)&&!this.accept.test(a.name);return!b}
改为:acceptFile:function(a){this.accept = this.owner.accept||this.accept;var b=!a||!a.size||this.accept&&h.exec(a.name)&&!this.accept.test(a.name);return!b}
由: j.multiple&&l.attr("multiple","multiple"),j.accept&&j.accept.length>0){for(a=[],b=0,d=j.accept.length;d>b;b++)a.push(j.accept[b].mimeTypes);l.attr("accept",a.join(","))
改为:j.multiple&&l.attr("multiple","multiple"),j.is_fold&&l.attr("webkitdirectory",""),j.accept&&j.accept.length>0){for(a=[],b=0,d=j.accept.length;d>b;b++)a.push(j.accept[b].mimeTypes);l.attr("accept",a.join(","))

5.vee-validate

由: Ot.isDisabled.get=function(){return!(!this.component||!this.component.disabled)||!(!this.el||!this.el.disabled)}
改为:Ot.isDisabled.get=function(){return false}

6.vue-clipboards.es.js

由: try {
 succeeded = document.execCommand(this.action)
 } catch (err) {
 succeeded = false
 }
改为:try {
 succeeded = window.clipboardData ? window.clipboardData.setData('Text', this.selectedText) : document.execCommand(this.action)
 } catch (err) {
 succeeded = false
 }

webpack打包说明

1. js打包:

2. css打包:

Browsers support

License