# 快速开始

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

# 安装

npm install vue3-element-dict

# 项目实践

//main.ts 文件

// 引入组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//获取字典数据版本号接口  接口名自定义
import {getGlobalConfigApi} from "@/api/module/common-api"
//字典包配置文件
import dictConfig from "./dict-config"
import vue3ElementDict from "vue3-element-dict";

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

TIP

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

# 对于嵌套iFrame的项目

main.ts文件同上

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

const {getDictObjByDictTypes} from "vue3-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项目，也可如此处理

← 介绍目录结构 →