# 快速开始

此篇文章教您如何快速使用vue2-element-dict包，让您从入门到熟练。下文默认您已经按结构目录创建好文件。目录结构>>

# 安装

npm install vue2-element-dict

# 项目实践

如果您的项目存在字典包版本号的概念则如下配置

//main.js 文件

import Vue from "vue"
import App from "./App.vue"
... 省略

import ElementUi from "element-ui"
//引入element的css
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUi)

import {getGlobalConfigApi} from "@/api/module/common-api.js"
import dictConfig from "@/dict-config.js"
import vue2ElementDict from "vue2-element-dict";

//获取接口返回的全局配置（包含当前字典版本号）
getGlobalConfigApi().then(data => {
  const {version} = data
  Object.assign(dictConfig, {version})
  Vue.use(vue2ElementDict, dictConfig)
  new Vue({
    ... 省略
    render: h => h(App)
  }).$mount("#app")
})

TIP

对于项目经常使用到的字典类型，可配置 usuallyGetDictTypes 字段详见字典包配置>>

如果您的项目不存在字典包版本号的概念则如下配置

//main.js 文件

import Vue from "vue"
import App from "./App.vue"
... 省略

import ElementUi from "element-ui"
//引入element的css
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUi)

import {getGlobalConfigApi} from "@/api/module/common-api.js"
import dictConfig from "@/dict-config.js"
import vue2ElementDict from "vue2-element-dict";
Vue.use(vue2ElementDict, dictConfig)
new Vue({
    ... 省略
    render: h => h(App)
}).$mount("#app")

# 对于嵌套iFrame的项目

main.ts文件同上

在路由拦截处书写代码类似如下

const {getDictObjByDictTypes} from "vue2-element-dict"
// 演示替换到维修升级页面
function beforeEachTo(to, from, next) {
  /**
  **下面的page1 page2 page3 为路由的name属性值， typeXX 为该页面引用到的字典类型
  **此段代码目的：防止页面上的字典组件单词请求一个字典接口，导致请求过多接口，影响性能，进页面前一次性获取
  **此获取数据接口只 请求缓存中不存在的 字典数据值，几乎不影响性能，可放心使用
  **如页面较多，可新开页面书写此段代码
  **对于非iFrame项目，也可如此处理
  **/
  const getDictType = {
    page1: "type11,type12,type13,type14",
    page2: "type21,type22,type23,type24",
   	page3: "type31,type32,type33,type34"
  }
  if (getDictType[to.name]) {
    // 无需await照样可用，不影响页面加载速度
    getDictObjByDictTypes(getDictType[to.name])
  }
  next()
}
export {
  beforeEachTo
}

TIP

上述代码的page1 page2 page3 为路由的name属性值， typeXX 为该页面引用到的字典类型
此段代码目的：防止页面上的字典组件单词请求一个字典接口，导致请求过多接口，影响性能，进页面前一次性获取
此获取数据方法只请求缓存中不存在的字典数据值，几乎不影响性能，可放心使用
如页面较多，可新开页面书写此段代码
对于非iFrame项目，也可如此处理

爆米花小布微信公众号

← 介绍目录结构 →