全流程监管,项目基本框架基于vuejs + element-ui + vuex + vue-router构成,其余项目中使用模块,参考模块列表
本项目使用的是vue-cli构建,对于环境需要安装node,由于vuejs要求,node版本不得低于6.0.0,建议用8.0.0以上版本(为了方便对node版本切换,可以使用nvm控制node版本,nvm说明文档)
npm install
项目所依赖的模块,由于项目依赖较多,可能安装较慢(安装一次即可)。npm run dev
运行即可,默认端口是8080,如果端口被占用,将自动使用其他端口,具体在启动完成后就可看到npm run build
在根目录下回多出一个dist文件夹,为打包后的文件npm run build --report
打包后文件分析表图,优化使用注意:由于npm仓库默认为国外的服务器,所以部分模块下载可能受阻导致安装失败,在下载之前可将npm仓库设置为国内仓库,npm config set registry http://registry.npm.taobao.org/
,完成后,根据需要可将仓库切换回国外仓库,命令:npm config set registry https://registry.npmjs.org/
,另外如果有模块一直安装失败,建议先将npm uninstall name
卸载模块后再使用npm install name
安装,例如'node-sass'模块容易安装失败,第一次安装失败后,先使用卸载命令,彻底卸载模块,后再重新单独安装
npm config set registry https://registry.npmjs.org/
npm config set registry http://registry.npm.taobao.org/
npm config set registry http://10.1.3.51:8081/repository/npm/
在没有特殊需求前提下,尽量使用公司仓库库,脱离公司局域网时,用淘宝镜像,需要发布模块时,用官方仓库
src/validate.js
等,对于另外一些不太常用模块,并未添加进来,可以根据自己需求来安装,例如,jquery
, 富文本编辑器模块
, html2canvas
, jspdf
,头像编辑模块
等等,详情参考其他模块安装
webpack打包配置文件,一般不用修改,如有特殊需求,根据需要修改
webpack打包配置参数,一般不用修改,如有特殊需求,根据需要修改,一般修改index.js
打包后生成的目录,里面是已经打包好的文件,一般刚下载项目是没有这个目录的
开发的主要目录
存放一些静态文件,打包时路径相对不变
程序所需的资源文件,会作为程序的一部分被打包
bootstrap4的less源文件目录,本项目并未全部使用bootstrap,只是将其中的less源码引入,方便定制修改
组件库,查看组件库目录
自定义指令
功能插件,当前包含PagedList.js(查询插件)和省市区code数据
通用插件集合,包含errorPage.js(请求错误处理),eventbus.js(事件中央总线),paramsConvert.js(参数处理插件),Util.js(通用小工具插件),说明,本插件库和libs有本质区别1. 本插件库,功能相对单一,全部为函数,不具备对象的使用原则,而libs则完全以对象的使用方式使用2. 本插件库的所有插件将全部挂载到Vue原型链上,可以通过Vue.XXX,或通过vm.$XXX都可访问,但libs不可以3. libs下的插件可以提供相对较多的参数供调用者使用,如:loading,调用者可通过vm.XXX.loading获取请求的状态,但本目录库不提供任何可中间调用参数,只提供返回结果
路由配置目录,所有的路由配置都在这个目录完成
vuex状态管理配置目录,其中user: 登录用户信息,具体数据,可在Chrome浏览器安装vuetool,启动程序后打开控制台的vue选项,可以看到相关的数据信息,相关操作请自行搜寻
组件入口
自定义的样式,为sass格式和改变element-ui样式变量文件
总的配置文件,打包的入口文件
自定义验证规则的配置文件,需要额外扩充验证规则统一在本文件下配置
路径以以上5中错误状态码结尾即可触发,例如:
router.push({path: '/500'})
直接使用即可,不需用传任何参数,自建内部已经进行定位,例如
<back-top></back-top>
注意:back-top内是通过监听window得滚动位置来处理按钮得显示与隐藏,所以在别处使用监听window得滚动时不可以直接赋值给window,可以通过$(window).scroll(this.scroll)
,需要安装jquery
3. 城市级联选择器CtiyCascader.vue
选择器包含三个下拉框,所有下拉数据都是从后台获取,可以给定默认值,例如:
<city-cascader
ref="city"
v-validate="'required|city'"
name="企业地址"
v-model="ec.cityName"
:provinceCode.sync="ec.provinceCode"
:areaCode.sync="ec.areaCode"
:cityCode.sync="ec.cityCode"
></city-cascader>
文件上传组件为element-ui基础上二次封装的一个组件,参数较多,使用阿里云OSS上传文件至阿里云,本组件参数较多,具体参考FileUpload文档
地信圈工程中,当前项目时间轴组件主要与element-ui中手风琴组件结合用在表单分块展开与收起,例如:
<time-line>
<el-collapse v-model="activeName" accordion>
<timeline-item :color="activeName === '1' ? 'green' : '#BAC1B0'">
<el-collapse-item title="项目信息" name="1">
内容区域
</el-collapse-item>
</timeline-item>
<timeline-item :color="activeName === '2' ? 'green' : '#BAC1B0'">
<el-collapse-item title="申请单位信息" name="2">
内容区域
</el-collapse-item>
</timeline-item>
</el-collapse>
</time-line>
将通用函数引入,调用函数获得OSS对象,当前OSS对象由前台维护,每次请求后有效时间为12分钟,对于使用不用关系是否过期,过期时会自动请求后台获取临时key,所以使用通用函数会返回一个promise,在使用时注意异步问题,建议使用async将异步同步化,例如:
import getOss from '../../plugins/aliOss'
<!--- methods ---->
async func (option) {
...
let client = await getOss()
let ret = await client.multipartUpload(name, file[, options])
...
}
请求错误处理,是将错误的抽取为公用函数,避免书写大量重复代码,再错处理时,通过调用将错误传递给错误处理函数,例如
axios.post(url, params).then(res => {
if (res.data.code === 1) {
// 成功处理
} else {
vm.$codeError(res)
}
}).catch(error => {
vm.$catchError(error)
})
错误码主要以提示信息为主,请求错误会根据不用的状态码跳转错误提示页面,或打开登录窗口
事件中央总线为组件通信备用方案,为解决个别通讯较为特殊的组件通信,大多数情况下使用vuex状态管理即可,尽量减少使用中央事件总线,因为当前并未对事件维护,如果过多的使用,可能会导致卡顿等现象,
<!-- 发送方 -->
import eventBus from '../plugins/eventbus.js';
...
eventBus.$emit('award-confirm-success')
...
<!-- 接受方 -->
import eventBus from '../plugins/eventbus.js';
...
eventBus.$on('award-confirm-success', function(data){
...执行收到时间后处理事情
}.bind(this));
...
本插件是将常用多条数据查询抽象为一个查询类,并暴露出简单查询函数和常用属性,具体参考PagedList文档 为了统一管理与阅读,建议将所有使用PagedList对象名命名为model,当有多个model同时存在时,可以使用以model开头的小驼峰命名方式
以上扩充函数是对vue的扩充,可以使用this和Vue调用,例如
this.$formatYMD()
,或者使用Vue.formatYMD()
v-permission="[2, 3]"
在需要角色控制的元素上使用v-permission
告诉指令元素有哪些角色可以显示,当前登陆人的角色指令自己去状态管理取,不用传递
注意:指令传入的值必须为数组,且元素个数不能为0,所有底层的对比都是userType
进行对比,所以传入的数组元素为userType的可用集合
只需要再配置路由时配置上:permission
字段即可,值也是数组,与权限控制指令传入值一样
鉴权问题,可详情参考用户鉴权
*** 城市级联选择器验证与文件上传验证与其余组件一样可以使用于任何组件之中,只是验证其本身的结果依赖于v-model绑定的数据,所以只要组件支持v-model绑定即可,不验证是为了满足产品需求而产生,对于同一验证,可能存在验证与不验证切换 ***
<div class="material-textfield green form-left" :class="{'validate-err': errors.has('qualificationCode')}">
<input type="text" required v-model="unitinfo.qualificationCode" v-validate="'required'" name="qualificationCode"/>
<label data-content="测绘资质等级及编号*">测绘资质等级及编号*</label>
</div>
<div class="flex-row" v-for="(item, index) in participants" :key="item.uuid">
<div class="material-textfield green w-25" style="margin-right: 10px;" :class="{'validate-err': errors.has('participants_name_' + index)}" >
<input type="text" required v-model="item.name" v-validate="'required|max:10'" :data-vv-name="'participants_name_' + index" >
<label data-content="名称*">姓名*</label>
</div>
</div>
<div class="flex-row vip-upload" style="margin-top: 8px;" :class="{'validate-err': errors.has('files' + index)}" v-for="(item, index) in samplelist" :key="index">
<label data-content="上传附件" style="width: 400px; text-align: right;" class="ewai" >{{item.name}}{{item.isNeed ? '*(必传)' : '(可选)'}}</label>
<file-upload
ref="upload"
v-model="item.path"
v-validate="item.isNeed ? 'required|fileupload' : 'nova'"
:data-vv-name="'files' + index"
:accept="item.accept"
:multiple="true"
:limit="item.limit"
:max-size="item.maxSize"
>
</file-upload>
</div>
以上为交为常用的使用方法,其余使用方式可以在官网查看vee-validate官方文档
暂无
/build/webpack.base.conf.js
中externals
整个删除,将/index.html
中的script连接引用删除即可/config/index.js
中,build.productionGzip
改为false
,对于compression-webpack-plugin
模块为了方便再次开启,可以不用卸载 $ npm install sass-loader node-sass --save-dev
$ npm i element-ui -S
$ npm i vee-validate --save
$ npm i qs -S
$ npm install vue-lazyload -D
$ npm install axios
$ npm install ali-oss --save
$ npm i vuex
$ npm install v-viewer
$ npm install --save-dev compression-webpack-plugin@1.1.11
$ npm install echarts --save
$ npm install --save esri-loader
$ npm install svg-sprite-loader -D
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。