Vue做项目必备（节省80%时间，持久更新，不讲武德）

墨蓝 2022-12-24 04:58 183阅读 0赞

**目录**

1.iconfont

2. sass版本问题

3.屏幕高宽度自适应

4. 跨域

5. 拦截器

6.项目插件安装

7.登录鉴权（单路由）

8.插件引入、持久化、字体图标、富文本、时间戳

9. 跳转、返回、前进和后退

10.echarts图表的使用

11. vue组件中引入js文件(放script中)

12.vue组件中引入css文件（放style中）

13.插槽

14.vue六种传值方式（属性传值、$refs、$parent、通知传值(广播传值)、本地传值、路由传值）

15.增删改查

16.登录+验证规则+重置

17.模拟数据

18.电话邮箱正则验证

19.dialog弹框（可用于增删改查）

20.登录的盒子居中

21.api封装

--------------------

> Vue脚手架中盒子高度设置问题：height:100vh;      //es6语法

# 1.iconfont #

<template>
    	<div>
    		<ul>
    			
    			<li><span class="iconfont"></span></li><br>
    			<li><span class="iconfont"></span></li>
    			<li><span class="iconfont"></span></li>
    			
    			<i class="iconfont icon-caidan"></i>
    			<i class="iconfont icon-jiazai1"></i>
    			<i class="iconfont icon-shangchuan"></i>
    			
    			
    		</ul>
    	</div>
    </template>
    
    <script>
    	import iconfont from '../myicon/icon-font/download/font_20dtp1i3pv6/iconfont.css'
    	export default {
    		
    	}
    </script>
      
    <style scoped>
    	li>span{
    		width: 50px;height: 50px;
    		float: left;
    	}
    </style>

# **2. sass版本问题** #

1、vue中sass安装使用============================================================
    方法一：
    
    我本地是将    "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",
    
    卸载当前版本   npm uninstall sass-loader
    安装     npm install sass-loader@7.3.1 --save-dev
    
    方法二：
    
    如若不行，此时运行按照提示执行  npm rebuild node-sass  命令
    
    （如若还不行，则先运行npm install node-sass命令执行）

# 3.屏幕高宽度自适应 #

mounted() {
    		// 调用自动调节
    		this.fc_height();
    	},
    	methods: {
    		// 获取屏幕宽高自动调节
    		fc_height() {
    			let html = document.documentElement || document.body;
    			let height = html.clientHeight - 60;
    			let aside = document.querySelector('.el-aside');
    			aside.style.height = height + 'px';
    		}
    	}

# 4. 跨域 #

proxyTable: {
    			'/admin': { //代理api
    				target: 'http://ceshi5.dishait.cn/admin', //服务器api地址
    				ws: true, // proxy websockets
    				changeOrigin: true, //是否跨域
    				pathRewrite: { //重写路径
    					'^/admin': ''
    				}
    			}
    		},

# 5. 拦截器 #

//添加请求拦截器
    axios.interceptors.request.use(config => {
      console.log(config)
      // 从sessionStorage获取token值，然后设置给请求头
      config.headers.Authorization = window.sessionStorage.getItem('token')
      // 在最后必须 return config
      return config
    })

#  6.项目插件安装 #

npm i element-ui -S                
    npm install axios --save      
    npm install echarts --save        
    npm install vant --save   
    npm install vuex -s
    cnpm install node-sass@4.14.1 sass-loader@7.3.1 -s

# 7.登录鉴权（单路由） #

beforeEnter(to,from,next){
    			if(sessionStorage.getItem("token")){
    				next()
    			}else {
    			   alert("请先登录");
    			   next('/')
    			}
    		},

# 8.插件引入、持久化、字体图标、富文本、时间戳 #

// 引入vuex
    import Vuex from 'vuex';
    
    // 持久化=====================================================================
    import VuexPersistence from 'vuex-persist'         //store中引入
    const vuexLocal = new VuexPersistence({            //store中引入
        storage: window.localStorage
    })
    
    
    plugins: [vuexLocal.plugin]                    //store中引入
    
    
    cnpm install --save vuex-persist               //下载
    
    
    // 引入vant组件====================================================================
    import Vant from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);
    
    
    // 引入第三方控件[分类参数]===============================================
    npm i vue-table-with-tree-grid -S     //下载
    
    import TreeTable from 'vue-table-with-tree-grid'    //在main.js中使用
    Vue.config.productionTip = false               //在main.js中使用
    //全局注册组件===============================================
    Vue.component("tree-table", TreeTable)
    
    // 导入字体图标===============================================
    import './assets/fonts/iconfont.css'
    // 导入富文本编辑器（用法）===============================================
    import VueQuillEditor from 'vue-quill-editor'
    // require styles 导入富文本编辑器对应的样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    
    // 将富文本编辑器，注册为全局可用的组件===============================================
    Vue.use(VueQuillEditor)
    
    
    // 时间戳转换===============================================
    Vue.filter('dateFormat', function(originVal) {
    	const dt = new Date(originVal)
    
    	const y = dt.getFullYear()
    	const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    	const d = (dt.getDate() + '').padStart(2, '0')
    
    	const hh = (dt.getHours() + '').padStart(2, '0')
    	const mm = (dt.getMinutes() + '').padStart(2, '0')
    	const ss = (dt.getSeconds() + '').padStart(2, '0')
    
    	return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })
    
    
    // 引入ElementUI组件===============================================
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    
    //Echarts图表引入===============================================
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    
    //引入axios和配置请求根路径===============================================
    import axios from 'axios' 
    axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1'
    // 添加请求拦截器===============================================
    axios.interceptors.request.use(config => {
      console.log(config)
      // 从sessionStorage获取token值，然后设置给请求头
      config.headers.Authorization = window.sessionStorage.getItem('token')
      // 在最后必须 return config
      return config
    })
    Vue.prototype.$http = axios

# 9. 跳转、返回、前进和后退 #

编程导航  
    
    我们可以用在渲染完元素不方便添加router-link的使用
    编程导航提供的方法：
    this.$router.push(路径) 跳转到哪个路由
    this.$router.go(-1) 返回上一级
    vue还提供一种方式 来实现导航  编程式导航 在事件中通过this.$router的方法来实现
    我们主要掌握的方法
    push()  进入到哪个页面
    想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
    go(-num) 返回哪个页面
    这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
    replace()
    跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 没有办法使用go()返回了
    
    
    this.$route 和this.$router的区别：
    this.$route 路由信息对象 可以获取参数列表
    this.$router路由实例对象 可以实现页面的转换

# 10.echarts图表的使用 #

<template>
        <div class="data_report">
            
            <div id="main" style="width: 600px;height:400px;">
                
                
            </div>
        </div>
        
    </template>
    
    <script>
    let echarts = require('echarts');
    export default {
        mounted() {
            this.fc_echarts();
        },
        methods: {
            fc_echarts() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                console.log(myChart);
                // 绘制图表
                // 指定图表的配置项和数据
                let option = {
                    // title: {
                    //     text: '堆叠区域图'
                    // },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {},
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
    
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    };
    </script>
    
    <style  scoped>
        #main{
            position: absolute;
                left: 313px;
                top: 126px;
                width: 700px;
                height: 500px;
        }
        
    </style>

# 11. vue组件中引入js文件(放script中) #

import   { login }   from   "../scripts/apis.js";

#  12.vue组件中引入css文件（放style中） #

import   login    from   "../scripts/apis.scss";                        
    
    import   login    from   "../scripts/apis.css";

#  13.插槽 #

匿名插槽：子组件<slot><slot>      父组件<child>今天天气阳光明媚<child>
    
    具名插槽：子组件<slot name="footer"><slot>        父组件<child>   <template>    <p>今天天气挺好<p>     <template>   <child>
    
    作用域插槽:
    
    子组件<slot :nickName="'Tusi'"></slot>
    
    父组件 <slot-child>
                <template slot-scope="scope">
                    <div>{
       {scope.nickName}}</div>
                </template>
            </slot-child>

#  14.vue六种传值方式（**属性传值、$refs、$parent、通知传值(广播传值)、本地传值、路由传值**） #

在介绍组件传值之前先明确三种组件关系：父子组件、兄弟组件、表兄弟组件（a1,a2,a3 | a1和a3）、无关系组件(a,b)
    
    1.属性传值：父传子
    可传值类型：固定值   绑定属性    方法   本类对象
    
    父：<htitle :bindMsg="msg" :run="run" :fatherThis="this"></htitle>
    
    子：
    
    props:{
    
         'mess':String,
    
         'bindMsg':[String, Number],
    
         'run':Function,
    
         'fatherThis':Object,
    
    }
    
    可传值类型：属性   方法 
    
    2.$refs：子传父与vue获取元素ref="dataNum"（this.$refs.dataNum.dataset.num）
    父：<v-fgsheader ref="header"></v-fgsheader>       使用：this.$refs.header.msg
    
    this.$refs.header.属性
    this.$refs.header.方法
    
    子：data(){  return{  msg:"我是子组件header的值哟"  }      }
    
    vue获取元素：
    
    <span data-num="21" ref="dataNum" @click="getData">55</span>
    
    this.$refs.dataNum.dataset.num
    
    3.$parent:父传子
    可传值类型：属性   方法 
    
    直接在子组件中使用this.$parent.XX，不需要做任何多余操作
    
    子 ：getFatherProp(){
    
              alert(this.$parent.fatherMsg);
    
    },
    
    4.兄弟传兄弟————通知传值(广播传值)
    只传基本数据类型，不能传方法。
    
    传输：通过 bus.$emit('名称','数据')传播数据
    
    接收：bus.$on('名称',function(){})
    
    示例：example
    
    定义bus.js文件：import Vue from 'vue'       var bus= new Vue();        export default bus;
    
    然后引入：import vueEvents from '../Model/vueEvent.js'
    
    5.本地传值（ localStorage和vuex都是本地存储）
    本地传值方式对于Vue而言有两种，一种是JS的localStorage，另一种Vuex。
    
    1. localStorage
    
    存:
    
    localStorage.setItem('tolist',JSON.stringify(this.tolist));
    取：
    
    var tolist = JSON.parse(localStorage.getItem('tolist'));
    
    2. Vuex
    使用数据： this.\$store.state.count
    调用方法： this.$store.commit('incCount');
    
     1.定义存储数据  var state = { count:1,}
    
         2. //类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
         var getterfl={
                  completedCountChange(state){
                  return state.count * 2 +'位';
                }
          }
    
          3.Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作
    
    var actionfl = {
      asynIncCount(context){  
    //因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
          context.commit('incCount');
      }
    }
    
    6.路由传值（this.$router.push）
    1.父组件push使用this.$router.push
    2.在子组件中获取参数的时候是this.$route.params
    
    1.动态路由传值
    
       1.1 配置动态路由
          routes:[
             //动态路由参数  以冒号开头
             {path:'/user/:id',conponent:User}
           ]
     
       1.2 传值
         第一种写法 :  <router-link :to="'/user/'+item.id">传值</router-link>
         第二种写法 : goToUser(id) {
                        this.$router.push( {path:'/user/'+id});
                      }
       1.3 在对应页面取值
           this.$route.params;  //结果:{id:123}
    
    2. Get传值(类似HTMLGet传值）
    
     6.路由传值（this.$router.push）
    1.父组件push使用this.$router.push
    2.在子组件中获取参数的时候是this.$route.params
    
    1.动态路由传值
    
       1.1 配置动态路由
          routes:[
             //动态路由参数  以冒号开头
             {path:'/user/:id',conponent:User}
           ]
     
       1.2 传值
         第一种写法 :  <router-link :to="'/user/'+item.id">传值</router-link>
         第二种写法 : goToUser(id) {
                        this.$router.push( {path:'/user/'+id});
                      }
       1.3 在对应页面取值
           this.$route.params;  //结果:{id:123}
    
    2. Get传值(类似HTMLGet传值）
    
     2.1 配置路由
         const routes = [{path:'/user',component:User},]
     2.2 传值  
         第一种写法 : <router-link :to="'/user/?id='+item.id">传值</router-link>
         第二种写法 : goToUser(id) {
                            //'user' 是路径名称
                          this.$router.push({path:'user',query:{ID:id}});
                      }
     2.3 在对应页面取值
         this.$route.query;  //结果 {id:123}
    
    3. 命名路由push传值
    
    3.1 配置路由
       const routes = [{path:'/user',name: 'User',component:User},]
    3.2 传值  
            goToUser(id) {
                    //'User' 是路径重命名
                  this.$router.push({name:'User',params:{ID:id}});
               }
    3.3 在对应页面取值
           this.$route.params;  //结果:{id:123}

#  15.增删改查 #

增：
    
    
    删：
    
    改：
    
    查询/搜索功能：
    eg:"ruleForm.auditState"
    <el-form :model="ruleForm" ref="ruleForm" class="el-ruleForm" size="small">
      <el-form-item label="审核状态" prop="auditState">
        <el-select v-model="ruleForm.auditState" placeholder="请选择" clearable>
           <el-option v-for="item in statusArr" :key="item.name" :label="item.name" 
           :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    //把参数写在需要的请求列表里：
    const params = {
            areaName: this.ruleForm.areaName ? this.ruleForm.areaName : null,
            cityName: this.ruleForm.cityName ? this.ruleForm.cityName : null,
            // cityCode: this.cityCode ? this.cityCode : null,
            auditState: this.ruleForm.auditState ? this.ruleForm.auditState : null,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
    
    ========================================================================================
    消息提示：两种书写方式
    
    1.this.$message({
              type: 'success',
              message: '禁用成功!'
            })
    
    2.this.$message.success('登录成功');

#  16.登录+验证规则+重置 #

<template>
    	<div class="login_container">
    		<div class="login_box">
    			<div class="avatar_box"><img src="../assets/111.gif" alt="" /></div>
    
    			<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
    				<el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input></el-form-item>
    
    				<el-form-item prop="password"><el-input v-model="loginForm.password" prefix-icon="el-icon-document" type="password"></el-input></el-form-item>
    
    				<el-form-item class="btns">
    					<el-button type="primary" @click="login">Login</el-button>
    					<el-button type="info" @click="resetLoginForm">Reset</el-button>
    				</el-form-item>
    			</el-form>
    		</div>
    		<iframe src="https://www.tukuppt.com/muban/lgamzeod.html" allow="autoplay" hidden />
    	</div>
    	
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			loginForm: {
    				username: 'admin',
    				password: '123456'
    			},
    
    			loginFormRules: {
    				username: [{ required: true, message: '请输入登录名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],
    
    				password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }]
    			}
    		};
    	},
    	methods: {
    		resetLoginForm() {
    			this.$refs.loginFormRef.resetFields();
    		},
    		login() {
    			this.$refs.loginFormRef.validate(async valid => {
    				if (!valid) return;
    				const { data: res } = await this.$http.post('login', this.loginForm);
    				console.log(res)
    				if (res.meta.status !== 200) return this.$message.error('登录失败！');
    				this.$message.success('登录成功');
    
    				window.sessionStorage.setItem('token', res.data.token);
    
    				this.$router.push('/home');
    			});
    		}
    	}
    };
    </script>

# 17.模拟数据 #

下拉框：
    statusArr: [{ id: 1, name: '待审核' }, { id: 2, name: '通过' }, { id: 3, name: '拒绝' }],

#  18.电话邮箱正则验证 #

data() {
    			var checkEmail = (rule, value, cb) => {
    				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    				if (regEmail.test(value)) {
    					return cb();
    				}
    
    				cb(new Error('请输入正确的邮箱'));
    			};
    
    			// 验证手机号
    			var checkMobile = (rule, value, cb) => {
    				const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
    				if (regMobile.test(value)) {
    					return cb();
    				}
    				cb(new Error('请输入合法的手机号'));
    			};
             return {
                    // 验证规则
    				addFormRules: {
                            email: [{
    						required: true,
    						message: '请输入邮箱',
    						trigger: 'blur'
    					}, {
    						validator: checkEmail,
    						trigger: 'blur'
    					}],
                     }
                   }

# 19.dialog弹框（可用于增删改查） #

<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
    			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
    				<el-form-item label="用户名">
    					<el-input v-model="editForm.username"></el-input>
    				</el-form-item>
    				<el-form-item label="邮箱" prop="email">
    					<el-input v-model="editForm.email"></el-input>
    				</el-form-item>
    				<el-form-item label="手机" prop="mobile">
    					<el-input v-model="editForm.mobile"></el-input>
    				</el-form-item>
    			</el-form>
    			<span slot="footer" class="dialog-footer">
    				<el-button @click="editDialogVisible = false">取 消</el-button>
    				<el-button type="primary" @click="editUserInfo">确 定</el-button>
    			</span>
    		</el-dialog>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFyayBzaGVuZw_size_20_color_FFFFFF_t_70_g_se_x_16][]

#  20.登录的盒子居中 #

left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%);

# 21.api封装 #

import axios from 'axios' // 引入axios
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { store } from '@/store'
    import { emitter } from '@/utils/bus.js'
    
    const service = axios.create({
        baseURL: import.meta.env.VITE_BASE_API,
        timeout: 99999
    })
    let acitveAxios = 0
    let timer
    const showLoading = () => {
        acitveAxios++
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            if (acitveAxios > 0) {
                emitter.emit('showLoading')
            }
        }, 400)
    }
    
    const closeLoading = () => {
            acitveAxios--
            if (acitveAxios <= 0) {
                clearTimeout(timer)
                emitter.emit('closeLoading')
            }
        }
        // http request 拦截器
    service.interceptors.request.use(
        config => {
            if (!config.donNotShowLoading) {
                showLoading()
            }
            const token = store.getters['user/token']
            const user = store.getters['user/userInfo']
            config.data = JSON.stringify(config.data)
            config.headers = {
                'Content-Type': 'application/json',
                'x-token': token,
                'x-user-id': user.ID
            }
            return config
        },
        error => {
            closeLoading()
            ElMessage({
                showClose: true,
                message: error,
                type: 'error'
            })
            return error
        }
    )
    
    // http response 拦截器
    service.interceptors.response.use(
        response => {
            closeLoading()
            if (response.headers['new-token']) {
                store.commit('user/setToken', response.headers['new-token'])
            }
            if (response.data.code === 0 || response.headers.success === 'true') {
                if (response.headers.msg) {
                    response.data.msg = decodeURI(response.headers.msg)
                }
                return response.data
            } else {
                ElMessage({
                    showClose: true,
                    message: response.data.msg,
                    type: 'error'
                })
                if (response.data.data && response.data.data.reload) {
                    store.commit('user/LoginOut')
                }
                return response.data.msg ? response.data : response
            }
        },
        error => {
            closeLoading()
            switch (error.response.status) {
                case 500:
                    ElMessageBox.confirm(`
            <p>检测到接口错误${error}</p>
            <p>错误码<span style="color:red"> 500 </span>：此类错误内容常见于后台panic，请先查看后台日志，如果影响您正常使用可强制登出清理缓存</p>
            `, '接口报错', {
                            dangerouslyUseHTMLString: true,
                            distinguishCancelAndClose: true,
                            confirmButtonText: '清理缓存',
                            cancelButtonText: '取消'
                        })
                        .then(() => {
                            store.commit('user/LoginOut')
                        })
                    break
                case 404:
                    ElMessageBox.confirm(`
              <p>检测到接口错误${error}</p>
              <p>错误码<span style="color:red"> 404 </span>：此类错误多为接口未注册（或未重启）或者请求路径（方法）与api路径（方法）不符--如果为自动化代码请检查是否存在空格</p>
              `, '接口报错', {
                        dangerouslyUseHTMLString: true,
                        distinguishCancelAndClose: true,
                        confirmButtonText: '我知道了',
                        cancelButtonText: '取消'
                    })
                    break
            }
    
            return error
        }
    )
    
    export default service

import service from '@/utils/request'
    
    
    export const getApiList = (data) => {
      return service({
        url: '/api/getApiList',
        method: 'post',
        data
      })
    }
    
    
    //在使用请求的组件里面引入
    import { mapActions } from 'vuex'
    import { captcha } from '@/api/user'
    import { checkDB } from '@/api/initdb'
    export default {
      name: 'Login',
      data() {
            return(){
    
         }
       }
    }

# 21.Vue.js Ajax(axios) #

**GET 方法传递参数格式如下：**

传递参数说明
    // 直接在 URL 上添加参数 ID=12345
    axios.get("/user?ID=12345")
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
     
    // 也可以通过 params 设置参数：
    axios.get("/user", {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

**POST 方法传递参数格式如下： **

传递参数说明
    axios.post("/user", {
        firstName: "Fred",        // 参数 firstName
        lastName: "Flintstone"    // 参数 lastName
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

**执行多个并发请求 **

实例
    function getUserAccount() {
      return axios.get("/user/12345");
    }
     
    function getUserPermissions() {
      return axios.get("/user/12345/permissions");
    }
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
      }));

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFyayBzaGVuZw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221120/b41f387c5b1f4ba0b74661f1f1bbd707.png