学习vue.js，axios以及跨域

没做过web开发的，还是用一天时间学习一下vue.js，以便以后配合golang写些简单的web程序。

学习vue.js

vue.js的入门就不写笔记了实在是懒得写，网上一堆文章直接搜索出来看看就好，同时可以配合element-ui做些测试。
本来看见web前端开发就挺烦的，一大堆乱七八糟的东西，传说中简单的vue也动不动就一堆什么全家桶，动手是最好的学习方法，稍微学习感觉vue确实挺简单方便，当然真正使用时应该还是挺多坑。

参考文章：
搭建vscode+vue环境
 这可能是vue-cli最全的解析了……
Vue2全家桶之一：vue-cli（vue脚手架）超详细教程
 基于vue-cli快速构建
以及：
Vue官网文档
 Vue CLI 官网文档
 Element UI官网文档
源码：
一个后台管理demo
类似饿了么官方客户端
 楼上客户端的后台管理器
 Vue2 后台管理系统解决方案
 Vue Element Admi 这个star最多

附神图一张（点击后查看原图）：

vue.js

mpvue和微信原生小程序开发

测试了一下mpvue开发小程序，发觉对于vue新手和小程序新手还不如直接使用小程序原生开发来的好，一个是还得去熟悉小程序开发文档，遇到坑更不容易解决，一个是mpvue下面编译到真机测试速度远没有原生的快，一个是我想以后原生的开发会越来越强大怕mpvue跟不上。

安装和使用axios

$ cnpm install axios

main.js文件：

import axios from 'axios'
Vue.prototype.$axios = axios

这样就可以使用this.$axios来调用axios，使用例子参考下面跨域。

跨域

1. 本地服务器开发环境，添加proxyTable代理：

修改config/index.js文件：

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { //修改这里
      '/bd': {
        target: 'https://www.baidu.com',
        secure: true, //https必须添加这个设置
        changeOrigin: true,
        pathRewrite: {
          '^/bd': ''
        }
      }

    },

做了以上修改以后需要重启服务器：npm run dev

调用
调用时可以直接使用'/bd'，会被自动替换为上面定义的target地址，调用例子：

App.vue文件：

methods: {
    getBd (event) {
      this.$axios.get('/bd')
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }

2. 生产环境

因为在开发环境我们一般直接使用npm run dev启动内置的服务器，而以上修改proxyTable的方法应该就是修改这个本地服务器的配置让其访问该代理地址时自动加上跨域功能。

而生产环境则不然，服务器一般是另外的比如使用nginx，此时修改nginx的跨域配置就可以了。或者golang gin写的服务器，那么就在代码中加上跨域支持。或者要访问第三方网站，那么直接使用后端编程语言比如go去跨域访问，其实说白了跨域跟客户端没什么关系都是服务器的事。

生产环境还没测试，等以后验证再补充修改。

版权声明：本文来源简书，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.jianshu.com/p/c94af9237f52
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-01-12 12:06:57
阅读 ( 1688 )
分类：前端