Vue前台网站项目总结

前言：本篇文章总结一下使用vue开发的一些项目配置以及一些开发技巧

 

 ESLint检测：

1. package.json : 全局规则配置文件

    'rules': {

      'no-new': 'off'

    }

1. 在js/vue文件中修改局部规则

    /* eslint-disable no-new */

    new Vue({

      el: 'body',

      components: { App }

    })

1. vue.config.js: 关闭规则检查

        // 关闭ESLint的规则

        lintOnSave: false,

 

api请求模块化配置 ：

配置config文件夹下建立index.js

export default {
    baseUrl:{
        dev:"/api/",//开发的时候后台接口的地址
        pro:""//上线产品发布之后，后台接口的地址
    },
}

在api文件夹下建立index.js

import axios from 'axios'
import config from '@/config'

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
//console.log(process.env.NODE_ENV)
class HttpRequest{
    constructor(baseUrl){
        this.baseUrl = baseUrl
        this.queue = {}
    }
    getInsideConfig(){
        const config = {
            baseURL:this.baseUrl,
            header:{
                //
            }
        }
        return config
    }
    interceptors(instance,url){
        instance.interceptors.request.use((config)=>{
            //处理config
            console.log('拦截和处理请求')
            config.data = {
                msg:"helloworld"
            }
            console.log(config)
            
            return config
        })
        instance.interceptors.response.use((res)=>{
            //处理响应
            console.log("处理响应")
            //console.log(res)
            return res.data
        },(error)=>{
            //请求出问题，处理问题
            console.log(error)
            return {error:"网络出错了"}
        })
    }
    request(options){
        const instance = axios.create()//创造实例对象
        options = Object.assign(this.getInsideConfig(),options)
        this.interceptors(instance,options.url)
        return instance(options)
    }
}


const axiosObj = new HttpRequest(baseUrl)
export default axiosObj

在具体的哪个业务请求下建议（例如data.js）

import axios from '@/api/axios'

export const getBannerData = ()=>{
    return axios.request({
        url:"banner",
        method:'get'
    })
}

// export const getUserData = () =>{
//     return axios.request({
//         url:"username",
//         method:"get"
//     })
// }


export const getPosiData = () =>{
    return axios.request({
        url:"posi",
        method:"get"
    })
}

export const getIndexEntryData = () =>{
    return axios.request({
        url:"index_entry",
        method:"get"
    })
}

export const getRestaurantsData = () =>{
    return axios.request({
        url:"restaurants",
        method:"get"
    })
}

 

跨域配置：

 

vue.config.js

devServer: {   proxy: {     '/api': { // 只对请求路由以/api开头的请求进行代理转发       target: &#