VUE管理系统项目笔记

1，vue.config.js

module.exports = {

    devServer: {

        port: 8888, // 端口号，如果端口号被占用，会自动提升1

        host: "localhost", //主机名， 127.0.0.1，  真机 0.0.0.0

        https: false, //协议

        open: true, //启动服务时自动打开浏览器访问

        proxy:{//代理

            '/':{

                target:'http://mengxuegu.com:7300/mock/5f5f28b18d90085e5b58464e',//目标

                changeOrigin:true,//开启代理服务器

                pathRewrite:{

                    '^/':''

                }

            }

        }

    },

    lintOnSave: false, // 关闭格式检查

    productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度 

}

 

2，手动封装异步请求工具 utils/request.js

　　import axios from 'axios'

　　const request = axios.create({

 　　　　baseURL: '/',

　　　　 timeout: 5000 // 请求超时

　　　　})

　　export default request

 

 

3，涉及到获取数据时得要创建独立的API（api/xxx.js）

　　import request from "@/utils/request";

　　export function aaa(){

　　　　return request({

　　　　　　　　url:'/user',

　　　　　　　　method:'get',

　　　　　　　　data　　　　

　　　　})

　　}

　　export function aaa(){}

 

4，页面引用API并且调用API暴露出的方法，传页面提交的表单参数来获取返回数据

5，

　　　　　　//获取用户信息后，把信息保存到本地，并且跳转路由到首页

                    

                    localStorage.setItem('mxg-user',JSON.stringify(userInfo.data));

                    localStorage.setItem('mxg-token',usertoken);

                    //前往首页

                    this.$router.push('/')

 

6，整体布局和路由配置，还有面包屑

 

　　

 

7，