1.简介iMeTisUI
iMeTisUI 是基于iview-admin进行开发的，其基本功能可以查看iview-admin开发文档
https://lison16.github.io/iview-admin-doc/ ，下面主要介绍iMeTisUI 开发功能。
项目结构
├── config 开发相关配置
├── public 打包所需静态资源
└── src
├── api AJAX请求
└── assets 项目静态资源
├── icons 自定义图标资源
└── images 图片资源
├── components 业务组件
├── config 项目运行配置
├── directive 自定义指令
├── libs 封装工具函数
├── locale 多语言文件
├── mock mock模拟数据
├── router 路由配置
├── store Vuex配置
├── view 页面文件
└── tests 测试相关
2.配置
webpack打包配置
vue.config.js文件里面配置打包内容，以及全局插件等等
iMeTisUI项目配置
在config文件夹里面进行配置，配置全局需要用的常量，例如向后台发送的域名跟端口，配置是否启动i18n等等
3.路由配置
在router文件夹里面的router.js进行路由配置，具体使用可以参考iview-admin开发文档。
4.多语言配置
在locale文件里配置，具体写法如下
```代码块``
1.<p slot="title">
{{$t('register.register')}}
</p>
2.let config = {
title:this.t('register.success.desc'),
}
```代码块``
- <Input v-model="user.account" :placeholder="$t('register.accoutPlaceHolder')"/>
5.组件
组件写在components里面。
main组件
main组件是全局通用组件，也是比较重要的组件，顶部头，左侧栏以及选项菜单卡，浮动菜单栏都属于main组件
table-page组件
表格组件，基于iview table组件，可以进行排序、分页、搜索等等，具体用法请参考iview组件库文档 （百度搜iview 第一个）
登录表单组件
login-form组件，登录页表单
6.api接口
ajax请求后台接口
使用规则类名+方法名 例如 applic.js 使用里面list方法
import api from '@/api/index'
const {applic} = api;
applic.list('').then(res => {
const data = res.data
if (data.success) {
self.changeArrToObj(data.defaultValues)
self.selectData = data.conditions
}
}).catch(err => {
console.log(err)
})
applic.js 配置适用性
1.list
/**
@param String
@url applic/list
@method post
@description 获取适用性数据
**/
download.js 下载类
1.getFolders
/**
@param Object
@url download/folder
@method post
@description 获取文件夹
**/
2.getFiles
/**
@param Object
@url download/files
@method post
@description 获取文件
**/
3.open
/**
@param baseUrl,data
@url window.open(baseUrl+'file/'+data.oid);
@description 打开文件
**/
favorite.js 收藏类
1.delete
/**
@param oid
@url favorite
@method delete
@description 删除收藏对象
**/
2.create
/**
@param oid
@url favorite
@method post
@description 创建收藏对象
**/
feedback.js 反馈类
1.create
/**
@param Object
@url feedback/
@method post
@type form
@description 创建反馈
**/
2.getList
/**
@param
@url feedback/list
@method post
@description 获取反馈列表
**/
3.getInfo
/**
@param oid
@url 'feedback/' + oid
@method get
@description 获取反馈对象
**/
4.getReplyList
/**
@param oid
@url 'feedback/' + oid
@method get
@description 获取反馈对象
**/
5.createReply
/**
@param Object
@url 'feedback/' + feedbackOid + '/reply'
@method post
@type form
@description 根据feedbackOid创建回复
**/
6.deleteReply
/**
@param feedbackOid,replyOid
@url 'feedback/' + feedbackOid + '/reply/' + replyOid
@method delete
@description 根据Oid删除回复
**/
7.checkPermission
/**
@param feedback_oid
@url 'feedback/'+feedback_oid+'/permission',
@method get
@description 校验反馈权限
**/
8.update
/**
@param feedback_oid,params
@url 'feedback/'+feedback_oid',
@method put
@description 更新反馈对象
**/
notice.js 公告类
1.getList
/**
@param Object
@url 'notice/list'
@method get
@description 获取公告列表
**/
user.js 用户类
1.login
/**
@param userName，password，validator，codeKey
@url 'principal/login'
@method post
@description 登录
**/
2.getAllInfo
/**
@param token，params
@url 'tisuser/allInfo'
@method get
@description 获得当前用户的所有信息
**/
3.updatePassword
/**
@param -params
@url 'tisuser/updatePassword',
@method put
@description 更新密码
**/
4.query
/**
@param token，params
@url 'user/reload'
@method get
@description 刷新用户、组的缓存
**/
注意事项
所有的类函数对象都必须注册到api文件夹的index.js中，例如
import buyCart from './buyCart';
export default {
//注册购物车类
buyCart
}
7.基本系统用的工具类以及工具函数
放在libs文件目录里面
api.request.js 文件
全局的axios 请求，系统配置ajax，向回台发送请求
app.js文件
项目可能会使用到一些jQuery插件，这个文件进行注册插件到项目中，例如：
blockui插件
这个插件可以做加载动画，ajax请求的加载动画基于该插件
var App = {
blockUI: function(options) {
//调用插件初始化内容
}
}
使用方法
import App from '@/libs/app'
App.blockUI({
//target:$("body"), //遮罩对象
animate: true,
overlayColor: 'black'
});
util.js文件
项目要需要使用到的多功能接口文件，例如：
setCookie 函数
export const setCookie = (key,value) => {
Cookies.set(key, value, {expires: config.cookieExpires || 1, path: config.cookiePath||'' });
}
tool.js文件
通用工具函数
例如
**
- 将里面的name1值赋值到name2值
- @param arr
- @param name1
- @param name2
- @param flag 是否要将原来的字段删除
*/
export const changeJSONStrName = (arr, name1, name2, flag) => {
for (var i = 0; i < arr.length; i++) {
arr[i][name2] = arr[i][name1]
if (flag) {
delete arr[i][name1]
}
}
// 递归层级节点drd
if (arr[i] && arr[i].children) {
changeJSONStrName(arr[i].children, name1, name2)
}
return arr
}
8.将iMeTisUI打包成依赖库
- 执行打包 npm run dist
- 切换npm库(注意，url最后的"/"不能丢) npm config set registry http://192.168.1.117:8088/repository/iMeNPM/
- 登录npm(admin/123qwe!@#,admin@example.com) npm login
- 复制package.json 到 dist目录
- 发布到npm库 npm publish dist
9.创建子项目
1.安装npm
2.npm install -g vue-cli
3.查看版本/是否安装成功 vue -V
4.在新文件夹下创建项目 vue create my-project
5.添加依赖库，主要介绍依赖iMeTisUI，具体如下
- 切换npm库(注意，url最后的"/"不能丢) npm config set registry http://192.168.1.117:8088/repository/npmGroup/
- 安装库 npm install iMeTisUI --save
安装完成之后，在main.js文件中注册依赖：
import iMeTisUI from 'iMeTisUI'
const {html,Vue,config,TisRouter,Main,store,App,iView,installPlugin,i18n,importDirective,partsListInfo,part} = iMeTisUI.default;
Vue.use(iMeTisUI.default.install);
6.启动项目 npm run dev 或者npm run serve ,命令由package.json文件里面设置名称决定
7.打包项目 npm run build
10.子项目创建路由及覆盖原来的路由
const {html,Vue,config,TisRouter,Main,store,App,iView,installPlugin,i18n,importDirective,partsListInfo,part} = iMeTisUI.default;
const router = new TisRouter();
router.addRoutes(
{
path: '/content',
name: 'content',
component: Main,
meta: {
hideInBread: true,
hideInMenu: true,
notCache: true
},
children: [
{
path: 'test',
name: 'serviceInfo1',
meta: {
icon: 'md-build',
title: '维修信息',
},
component:test
},
{
path: 'html/:oid/:title',
name: 'html',
meta: {
icon: 'ios-bookmarks',
// title: '主题内容',
title: route => `{{${route.params.title}}}`,
},
component:html
}
]
});
console.log(router);
/* eslint-disable no-new */
window.vue = new Vue({
el: '#app',
router:router.getRouter(),
i18n,
store,
render: h => h(App)
})
