Vue+axios+ElementUI 5分钟入门

0x00 环境

brew install node
# node 中自带 npm 命令
npm install -g axios
npm install -g vue-cli
npm install -g webpack
npm install -g element-ui

0x01 项目创建

vue init webpack demo

0x02 axios 配置

参考: https://www.cnblogs.com/qianxiaox/p/14025708.html
可以进行一些全局axios配置, 这里的用法相当于创建一个全局的 http 客户端实例, 然后在各模块页里, 直接引用, 并执行相应方法.
当然, 可以进一步封装, 把业务请求整合到一个独立的js里.

// main.js  直接添加配置信息
import axios from 'axios'
const service = axios.create({
  baseURL: '/api',
  withCredentials: true,
  timeout: 5000,
  // headers: {
  //   get: {
  //     'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  //   },
  //   post: {
  //     'Content-Type': 'application/json;charset=utf-8'
  //   }
  // },
  validateStatus: function () {
    return true
  },
  transformResponse: [
    function (data) {
      if (typeof data === 'string' && data.startsWith('{')){
         data = JSON.parse(data)
      }
      return data
    }
  ]
})
export default service

然后在具体页面中, 可以参考如下写法:

<script>
import service from "../main";

export default {
  name: "Menu",
  data() {
    return {
      msg: "Nice"
    }
  },
  methods: {
    test() {
      service.get('/test')
        .then(value => {
          console.log(value.data)
          this.msg = value.data
        })
    }
  }
}
</script>

0x03 路由转发

做为前后端分离开发模式, 肯定会遇到跨域问题, 可以采用下面的方法进行解决:

在项目文件 config/index.js 中, 配置自定义路由转发:

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:9000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },

上面的功能是: 在web前端发的请求, 直接转换为向另一个后端服务发请求, 同时支持 uri 前缀置换, 这里的例子意思是没有置换, 相当于只改变了服务端口.

0x04 ElementUI 引入

为了方便使用好看的UI组件, 可以在 main.js 中 添加下面的代码:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

组件用法参考: https://element.eleme.cn/#/zh-CN/component/button

0x05 效果图

<template>
  <div>
    {{ msg }}
    <el-input v-model="msg" placeholder="输入用户名..."/>
    <el-button type="success" @click.native="test">登录加载</el-button>
  </div>
</template>

<script>

import service from "../main";

export default {
  name: "Menu",
  data() {
    return {
      msg: "test"
    }
  },
  methods: {
    test() {
      service.get('/test')
        .then(value => {
          console.log(value.data)
          this.msg = value.data
        })
    }
  }
}
</script>

<style scoped>

</style>

输出效果图:

好了, 这样就可以最基础的页面功能开发了.