Vue模块化开发 (axios,跨域)

vue 脚手架创建项目

vue create 项目名称

n

关闭es-link检测
文件=》首选项=》设置

自定义一个组件

scope 限制样式只在当前组件使用，如果不加这个就是全局的样式
lang=‘less’ Css动态预处理器

注册全局组件

项目脚手架配置

项目打包

在项目根目录下执行下面命令,会生成dist文件

npm run build 

使用axios实现数据交互

新建一个组件CompC

<template>
    <div>
        <button @click="sendAjax">发送ajax请求button>
        <div v-if="user">
            <p>姓名:{{user.name}}p>
        div>
    div>
template>



<script>
// https://gitee.com/api/v5/users/tangyang8942
import axios from 'axios'
export default {
    data(){
        return{
            user:null
        }
    },
    methods:{
        sendAjax(){
            axios.get('https://gitee.com/api/v5/users/tangyang8942')
            .then(res=>{ // res 代表响应对象
                this.user=res.data
            })
            .catch(err=>{ // 错误对象
                console.log(err)
            })
        }
    }
}
script>

<style lang='less'>

style>

全局引入axios

配置代理服务器实现跨域请求

这里可以看到还是本地的路径，只是我们访问以api开头的路由，帮我们做了转发

还可以配置日志，在控制台输出

简化axios请求