iMeTisUI开发文档

2018-12-26  本文已影响0人  _嘿嘿_

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.title'), desc:this.t('register.success.desc'),
}
```代码块``

  1. <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文件

通用工具函数
例如
**

8.将iMeTisUI打包成依赖库

  1. 执行打包 npm run dist
  2. 切换npm库(注意，url最后的"/"不能丢) npm config set registry http://192.168.1.117:8088/repository/iMeNPM/
  3. 登录npm(admin/123qwe!@#,admin@example.com) npm login
  4. 复制package.json 到 dist目录
  5. 发布到npm库 npm publish dist

9.创建子项目

1.安装npm
2.npm install -g vue-cli
3.查看版本/是否安装成功 vue -V
4.在新文件夹下创建项目 vue create my-project
5.添加依赖库，主要介绍依赖iMeTisUI，具体如下

  1. 切换npm库(注意，url最后的"/"不能丢) npm config set registry http://192.168.1.117:8088/repository/npmGroup/
  2. 安装库 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)
})
上一篇下一篇

猜你喜欢

热点阅读