# 开始

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

# 安装

npm install -S vue2-vant-dict

# 项目实践

//main.js 文件

import Vue from "vue"
import App from "./App.vue"
// 引入组件库
import Vant from "vant-xiaobu"
import "vant-xiaobu/lib/index.css"
Vue.use(Vant)

import router from "@/router"
import { beforeEachHandler } from "@/router/before-each"
import afterEachHandler from "@/router/after-each"
router.beforeEach(beforeEachHandler)
router.afterEach(afterEachHandler)

import {getGlobalConfigApi} from "@/api/module/common-api.js"
import dictConfig from "@/dict-config.js"
import vue2VantDict from "vue2-vant-dict"

//获取当前版本号
getGlobalConfigApi().then(data => {
  const {version} = data
  Object.assign(dictConfig, {version})
  Vue.use(vue2VantDict, dictConfig)
  new Vue({
    router,
    render: h => h(App)
  }).$mount("#app")
})

# 仅提供单个页面时使用

//main.js 文件

// 引入组件库
import Vant from "vant-xiaobu"
import "vant-xiaobu/lib/index.css"
Vue.use(Vant)

import {getGlobalConfigApi} from "@/api/module/common-api.js"
import dictSetting from "@/dict-setting.js"
//获取当前版本号
getGlobalConfigApi().then(data => {
  const {version} = data
  Object.assign(dictSetting, {version})
  new Vue({
    render: h => h(App)
  }).$mount("#app")
})

功能页上使用

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

← 介绍目录结构 →