vue element ui postman模拟数据 登陆页面 （1）

效果展示  介绍一个大概  就是一个基础的登录页面  

 我自己模拟的数据  不会可以参考我下边的 教程

跨域问题Access to XMLHttpRequest at ‘https:/ost?nam‘ from originNo ‘Access-Control-Allow-Origin‘ header_阿金要当大魔王~~的博客-CSDN博客https://blog.csdn.net/weixin_68266812/article/details/132558286?spm=1001.2014.3001.5501

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

首先我们创建程序  然后引进ui库  然后我们需要配置一些东西

1. 如果有路由的话  我们需要配置路由       router.js
2. 跨域了的话 我们需要配置同源的数据     vue.config.js
3. 配置main的引入数据                                main.js

 router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/demo',
      name: 'Demo',
      component: () => import(/* webpackChunkName: "about" */'./views/Demo.vue')
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: () => import(/* webpackChunkName: "about" */'./components/HelloWorld.vue')
      // 子级路由  
      // children: [
      //   {
      //     path: '/demo',
      //       name: 'Demo',
      //       component: () => import(/* webpackChunkName: "about" */'./views/Demo.vue')
      //   }
      // ]
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)


var axios = require('axios')
axios.default.baseURL = '/api'
 
Vue.prototype.$http = axios //正确的使用 


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue.config.js

module.exports = {
    devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "0.0.0.0",  //也可以换成localhost      host: "localhost", 
    //   port: 8080,
      // https: true,
      hotOnly: false, 
       //以上的ip和端口是我们本机的;下面为需要跨域的
       proxy:{ //配置跨域
          '/api': {
              target: 'https://postman-echo.com/post',   //你的后端端口前部分 ？之前的部分
              changeOrigin: true, // 虚拟的站点需要更管origin     //允许跨域
              pathRewrite: {  
                  '^/api': ''  //请求的时候使用这个api就可以
              }
          }
      },
  },
}

登陆页面