# 快速开始

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

# 安装

npm install -S vue-vant-dict

# 项目实践

//main.js 文件

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

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

# 仅提供单个页面时使用

//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"
//获取当前版本号
getGlobalConfigApi().then(data => {
  const {verssion} = data
  Object.assign(dictSetting, {verssion})
  Vue.prototype.$dictSetting = dictSetting
  new Vue({
    render: h => h(App)
  }).$mount("#app")
})

功能页上使用

//  XXX.vue页面
import Vue from "vue"
const vueVantDict = require("vue-vant-dict")
export default {
    beforeCreate() {
        //一些字典配置
        const setting = {
          // isGetAll: true,
          usuallyGetFileds: "UNIT_TYPE,AAC005,AAC058,AAC004" //页面上有用到的数据
          // getDictEveryTime: true
        }
        const dictSetting = Object.assign(this.$dictSetting, setting)
        Vue.use(vueVantDict, dictSetting)
    }
}

TIP

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

← 介绍目录结构 →