Back

配置vuejs的常量: 使用vue-config

发布时间: 2017-03-02 08:02:00

参考:  https://github.com/airyland/vue-config

使用方法:

1. package.json 中添加   vue-config 这个module. 

 11   "dependencies": {
 12     "axios": "0.15.3",
 13     "fastclick": "^1.0.6",
 14     "sass": "^0.5.0",
 15     "vue": "^2.0.1",
 16     "vue-bulma-modal": "^1.0.0",
 17     "vue-config": "^1.0.0",            //   注意这里。不一定非得指定版本号。
 18     "vue-resource": "^1.0.3",
 19     "vue-router": "^2.0.2",
 20     "vuex": "^2.0.0",
 21     "vuex-router-sync": "^3.0.0"
 22   },

2. $ npm install

3. 在你的  app.js (vue入口文件)中,添加:

import vueConfig from './vue-config'

const config = { 
  API: 'http://api.yourserver.com',
  LOGO: 'http://showmethemoney.sweetysoft.com//image/80/logo.jpg'
}

// 下面一行的顺序不能搞错。 必须放在定义常量的下方。否则vue2.0 会报错。
Vue.use(vueConfig, config)

4。 使用

在 <script> 中,可以使用:     this.$config.LOGO

如果要在<view> 中使用的话,需要: 

4.1 先在 <view> 的 data() 方法中,先声明, 

4.2 然后在 <view>的 created() 方法中,进行个声明: 

<template>
  <img :src="IMAGE_PLACE_HOLDER"
</template>

<script>
  .....
  data () {
    return {
        IMAGE_PLACE_HODLER:  ''
    }
  }
  created() { 
        this.IMAGE_PLACE_HOLDER = this.$configs.image_placeholder
  }

(说到底, 还是太多语法糖)

Back