1.簡介iMeTisUI

iMeTisUI 是基于iview-admin進(jìn)行開發(fā)的礼搁，其基本功能可以查看iview-admin開發(fā)文檔
https://lison16.github.io/iview-admin-doc/ 垮抗，下面主要介紹iMeTisUI 開發(fā)功能想际。

項目結(jié)構(gòu)

├── config 開發(fā)相關(guān)配置
├── public 打包所需靜態(tài)資源
└── src
├── api AJAX請求
└── assets 項目靜態(tài)資源
├── icons 自定義圖標(biāo)資源
└── images 圖片資源
├── components 業(yè)務(wù)組件
├── config 項目運行配置
├── directive 自定義指令
├── libs 封裝工具函數(shù)
├── locale 多語言文件
├── mock mock模擬數(shù)據(jù)
├── router 路由配置
├── store Vuex配置
├── view 頁面文件
└── tests 測試相關(guān)

2.配置

webpack打包配置

vue.config.js文件里面配置打包內(nèi)容，以及全局插件等等

iMeTisUI項目配置

在config文件夾里面進(jìn)行配置澎灸，配置全局需要用的常量讲冠，例如向后臺發(fā)送的域名跟端口辟躏，配置是否啟動i18n等等

3.路由配置

在router文件夾里面的router.js進(jìn)行路由配置，具體使用可以參考iview-admin開發(fā)文檔驯遇。

4.多語言配置

在locale文件里配置芹彬，具體寫法如下

```代碼塊``
1.<p slot="title">
{{$t('register.register')}}
</p>

2.let config = {
title:this.t('register.success.desc'),
}
```代碼塊``

3. <Input v-model="user.account" :placeholder="$t('register.accoutPlaceHolder')"/>

5.組件

組件寫在components里面。

main組件

main組件是全局通用組件叉庐，也是比較重要的組件舒帮，頂部頭，左側(cè)欄以及選項菜單卡陡叠，浮動菜單欄都屬于main組件

table-page組件

表格組件玩郊，基于iview table組件，可以進(jìn)行排序枉阵、分頁译红、搜索等等，具體用法請參考iview組件庫文檔 （百度搜iview 第一個）

登錄表單組件

login-form組件兴溜，登錄頁表單

6.api接口

ajax請求后臺接口
使用規(guī)則類名+方法名 例如 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 獲取適用性數(shù)據(jù)
**/

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 創(chuàng)建收藏對象
**/

feedback.js 反饋類

1.create
/**
@param Object
@url feedback/
@method post
@type form
@description 創(chuàng)建反饋
**/

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 根據(jù)feedbackOid創(chuàng)建回復(fù)
**/

6.deleteReply
/**
@param feedbackOid,replyOid
@url 'feedback/' + feedbackOid + '/reply/' + replyOid
@method delete
@description 根據(jù)Oid刪除回復(fù)
**/

7.checkPermission
/**
@param feedback_oid
@url 'feedback/'+feedback_oid+'/permission',
@method get
@description 校驗反饋權(quán)限
**/

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 獲得當(dāng)前用戶的所有信息
**/

3.updatePassword
/**
@param -params
@url 'tisuser/updatePassword',
@method put
@description 更新密碼
**/

4.query
/**
@param token，params
@url 'user/reload'
@method get
@description 刷新用戶斋攀、組的緩存
**/

注意事項

所有的類函數(shù)對象都必須注冊到api文件夾的index.js中已卷，例如
import buyCart from './buyCart';
export default {
//注冊購物車類
buyCart
}

7.基本系統(tǒng)用的工具類以及工具函數(shù)

放在libs文件目錄里面

api.request.js 文件

全局的axios 請求，系統(tǒng)配置ajax淳蔼，向回臺發(fā)送請求

app.js文件

項目可能會使用到一些jQuery插件侧蘸，這個文件進(jìn)行注冊插件到項目中，例如：
blockui插件
這個插件可以做加載動畫鹉梨，ajax請求的加載動畫基于該插件
var App = {
blockUI: function(options) {
//調(diào)用插件初始化內(nèi)容
}
}

使用方法
import App from '@/libs/app'
App.blockUI({
//target:$("body"), //遮罩對象
animate: true,
overlayColor: 'black'
});

util.js文件

項目要需要使用到的多功能接口文件讳癌，例如：
setCookie 函數(shù)
export const setCookie = (key,value) => {
Cookies.set(key, value, {expires: config.cookieExpires || 1, path: config.cookiePath||'' });
}

tool.js文件

通用工具函數(shù)
例如
**

• 將里面的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]
  }
  }
  // 遞歸層級節(jié)點drd
  if (arr[i] && arr[i].children) {
  changeJSONStrName(arr[i].children, name1, name2)
  }
  return arr
  }

8.將iMeTisUI打包成依賴庫

1. 執(zhí)行打包 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. 復(fù)制package.json 到 dist目錄
5. 發(fā)布到npm庫 npm publish dist

9.創(chuàng)建子項目

1.安裝npm
2.npm install -g vue-cli
3.查看版本/是否安裝成功 vue -V
4.在新文件夾下創(chuàng)建項目 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文件里面設(shè)置名稱決定

7.打包項目 npm run build

10.子項目創(chuàng)建路由及覆蓋原來的路由

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: '主題內(nèi)容',
                    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)
})