Vue-bus中央事件总线

非父子组件（例如兄弟组件）之间传值的方式，可以用vuex，也可以用Vue-bus中央事件总线。首先需要安装，npm install vue-bus --save。然后在main.js中注册。

import Vue from 'vue'
// 引入中央事件总线
import VueBus from 'vue-bus';
// 注册 该插件
Vue.use(VueBus);

使用方法：
举例 A页面往B页面传递值

// A页面中，触发了一个叫toBPage的事件，并传递了参数‘hello world！’
...
methods: {
  toBPage(){
    this.$bus.emit('bPage', 'hello world!');
  },
}
...

// B页面中，this.$bus.on监听了bPage这一事件，并传入了回调函数this.getBPage，该函数内的item值就是A页面传递过来的数据
created: function () {
  this.$bus.on('bPage', this.getBPage);
},
// Vue的生命周期，在离开该页面时需要销毁监听事件，this.$bus.off即销毁监听事件
beforeDestroy() {
  this.$bus.off('bPage', this.getBPage);
},
methods: {
  getBPage(item){
    console.log(item);//item就是传递过来的数据
  },
}

Vue-meta用法

不同于HTML页面中的meta使用方法，是为了规定视觉窗口等信息，Vue中的meta字段用于设置HTML的元数据（描述数据的数据），该数据不会显示在页面中，主要用于浏览器（如和现实内容或重新加载页面）、搜索引擎（如SEO）及其他web服务。
在Vue中有两种方法使用：
1.在main.js中使用

import Meta from 'vue-meta';
Vue.use(Meta)

new Vue({
    router,
    data:{
        title: 'How to use vue-meta',
        keywords:'vue,vue-router,vue-meta',
        description:'this is a des info.'
    },
    //定义metaInfo，meta字段内描述了metaInfo数据
    metaInfo(){
        return(){
            title: this.title,
                meta:[
                    {
                        name:'keywords',
                        content:this.keywords
                    },{
                        name:"description",
                        content:this.description
                    }
                ]
        }
    },
    render: h=>(APP)
}).$mount('#app')

2.与vue-route结合使用
在router.js路由配置文件中添加meta信息

import Vue from 'vue'
import Router from 'vue-router'
const router = new Router({
  mode: 'hash',
  base: isDevelopment() ? '/' : '/iftttrade',
  routes: [
    {
      path: '/',
      component: List,
      meta: {
        title: '订单列表',
        keepAlive: true,
        unifyLogin: false,
        authLogin: window.JSB.isInYTJ
      }
    },
    {
      path: RouterPaths.ERROR,
      component: Error
    },
    {
      path: RouterPaths.LOGIN,
      component: Login,
      meta: {
        title: '登录'
      }
    }
   ]
  }
 )

然后在组件中都可以通过this.$route.meta.xxx访问到元信息中的数据。

Storage

Storage作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。Storage.setItem()两个参数都是字符串。如果不是字符串，会自动转成字符串，再存入浏览器。Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null。Storage.key()接受一个整数作为参数(从零开始)，返回该位置对应的键值。

sessionStorage.setItem（）

sessionStorage.setItem()两个参数都是字符串。如果不是字符串，会自动转成字符串，再存入浏览器。

// 两个参数都是字符串，用于存入数据
sessionStorage.setItem('anchor', '1')

sessionStorage.getItem()

读取数据，参数是键名，键名不存在，该方法返回null。

sessionStorage.getItem('entrust_no')

sessionStorage.key()

接收一个整数作为参数，从0开始，返回该位置对应的键值，获取本地存储的Key。

sessionStorage.key(i) // 获取本地存储的Key

TypeScript定义函数中参数带？号

函数参数里的?表示该参数是一个可选参数，成员的？表示该成员可能不存在。

disableItem(name?: string)
class A {name?: string} ；
interface B {name?: string}

Element UI的Table表格

ElementUI中table表格通过slot-scope 可以来自定义表头

// 这里自定义了两个按钮，edit和delete
	</el-table-column>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>

HTML代码转义字符&nbsp

html代码中输入十个转义字符&nbsp；就表示十个空格，输入十次空格键只显示一个空格.

//完整写法
&nbsp;

前端Proxy配置代理服务器，解决跨域问题

我们知道同源策略只是在浏览器中存在，不存在于服务器中。因此我们可以将需要跨域请求的地址转发给我们自己的服务器然后委托服务器去请求信息。
在下述例子中配置了两个代理 proxy，使用第二个代理，此时 proxy 会监听拦截所有请求接口中有 “/track_req/” 的接口 => 重写接口路径把接口中的 “/track_req/” 写为 " " => 发送给本地端口的请求映射到 target 中设置的后端接口地址上，最后 http://localhost:5051/track_req/login=> http://http://10.010.1.8:18000/login 。

  devServer: {
    port: 5051, // 端口号
    https: false, // https:{type:Boolean}
    open: false, // 配置自动启动浏览器
    // 配置多个代理
    proxy: {
    	// 监听拦截以/biz_req/开头的请求接口，并替换成target
      '/biz_req/': {
      // 后台接口
		target: 'http://22.163.02.93:8888/biz_req/'
      },
      // 监听拦截以/track_req/开头的请求接口，并替换成target
      '/track_req/': {
        target: 'http://10.010.1.8:18000/',
        // 重写接口路径
        pathRewrite: {
           // 把/track_req变为空字符
          '^/track_req': ''
        }
      }
    }
  },