# 快速开始

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

# 安装

npm install -S vue-element-dict

# 项目实践

//main.js 文件

//引入element的css 如果已引入 可不要重复引入
import "element-ui/lib/theme-chalk/index.css"
//获取字典数据版本号接口  接口名自定义
import {getGlobalConfigApi} from "@/api/module/common-api.js"
//字典包配置文件
import dictSetting from "@/dict-setting.js"
const vueElementDict = require("vue-element-dict")

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

TIP

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

# 对于嵌套iFrame的项目

main.js文件同上

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

const {getDictObjByDictTypes} = require("@/utils/vue-element-dict.umd.min.js")
// 演示替换到维修升级页面
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]) {
    getDictObjByDictTypes(getDictType[to.name])
  }
  next()
}
export {
  beforeEachTo
}

TIP

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

← 介绍目录结构 →