vue工作中的小结

1 npm run dev 与 npm run build

package.json 里面

"dev": "node build/dev-server.js",
"build": "node build/build.js",

npm run build的执行过程：

    检查node和npm的版本;
    引入相关插件和配置;
    创建express服务器和webpack编译器;
    配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
    挂载代理服务和中间件;
    配置静态资源;
    启动服务器监听特定端口（8080）;
    自动打开浏览器并打开特定网址（localhost:8080）;
    
    说明： express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。
    前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

2 $http.post().then().bind().catch().bind() 解决作用域的问题

多个回调函数都有各自独立的作用域，如果直接在里面访问 this，无法访问到 Vue 实例 这时只要添加一个 .bind(this) 就能解决这个问题

// 当请求成功时，会执行 .then，否则执行 .catch

    $http.post().then(function(res){
      console.log(res)
    })
    .catch(function(err){
      console.log(err)     
    })

// bind（this） 解决作用域的问题

    .then(function(res){
      console.log(this.data)
    }.bind(this))       

3 关于 cookie 的跨域问题

服务器端

配置cors即可

客户端

配置Axios.defaults.withCredentials = true，
Vue.http.options.xhr = { withCredentials: true } 

注意：

如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。

4 vue 中 scope 和 slot-scope 作用域 插槽

// slot-scope vue2.5版本中取代了scope

    <template slot-scope="s">     //  名字 自定义
        <el-button
                size="small"
                type="primary"
                @click="handleDetails(s.$index, s.row.id)">
            查看
        </el-button>
        <el-button
                size="small"
                type="primary"
                @click="handleAddOrder(s.$index, s.row.id)">
            新增订单
        </el-button>
    </template>

5 vue 中 的 ref 与 $refs

用ref绑定之后，就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。 然后在javascript里面这样调用：this.$refs.input1 减少获取dom节点的消耗。

// 事例：
    
    <el-form label-position="right"
             label-width="100px"
             :inline="false"
             :model="order_data"
             :rules="rules"
              ref="addOrder"
    >
    this.$refs['addOrder'].validate((valid)=> {