vuecli3学习的第3天(window系统)

本博客根据腾讯课堂吴老师《VueCli3实战项目-还原饿了么订餐app(短信验证码登录和高德定位)》编写。讲课很好，如果有想学习欢迎加入。

axios的配置

axios安装
cnpm install axios --save
在main.js 中
import axios from axios
Vue.prototype.$axios=axios;可以全局引用$axios发送请求

vue跨域请求

在根路径下创建文件vue.config.js

module.exports = {
    
    
    devSever:{
    
    
        open:true,
        host:'localhost',
        port:8080,
        https:false,
        hotOnly:false,
        // 跨域
        proxy: {
    
    
            '/api': {
    
    
                target: 'https://ele-interface.herokuapp.com/api/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
    
    
                    '^/api':''
                }
            }
        },
        before: app=>{
    
    }
    }
}

制作一个tabbar组件

const router =  new Router({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
    
    
      path: '/',
      // name: 'index',
      component: () => import('./views/index.vue'),
      children:[
        {
    
    
          path:'',
          redirect: '/home'
        },
        {
    
    
          path:'/home',
          name: 'home',
          component: () => import('./views/Home.vue')
        },
        {
    
    
          path:'/order',
          name: 'order',
          component: () => import('./views/Order.vue')
        },
        {
    
    
          path:'/me',
          name: 'me',
          component: () => import('./views/Me.vue')
        }
        
      ]
    },{
    
    
      path: '/login',
      name: 'login',
      component: () => import('./views/Login.vue') 
    }
  ]
})