Vue 脚手架配置

1.安装vue脚手架

     vue create project 

2.启动项目

npm run serve

3.配置px 转为rem

1.安装px2rem-loader

     npm install px2rem-loader --save-dev

 2.移动端适配解决npm包

        npm install lib-flexible --save

3.(目录: src/main.js)

        import 'lib-flexible' // 移动端适配

4.下载依赖  安装 "postcss-plugin-px2rem" 

        npm install postcss-plugin-px2rem --save-dev

5.在根目录创建vue.config.js

          复制以下代码

module.exports = {
    // 配置rerm less
    chainWebpack: (config) => {
        config.module
            .rule('css')
            .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .options({
                remUnit: 75
            })

    },
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。

                        exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值

                        mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    }),
                ]
            }
        }
    },

    // 配置反向代理
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.ibugthree.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    }
}

6.package.json 中加入postcss 相关插件

 "postcss": {
    "plugins": {
      "autoprefixer": {},
      "precss": {}
    }
  }

4.配置axios

1. 安装axios
    npm install axios --save

2.配置文件
（1）在src文件夹中创建 api 文件夹 

   1）创建文件request.js // 请求配置文件，axios的配置都在这里进行

import axios from 'axios';//导入axios
 
// 创建axios实例
export const Service = axios.create({
    timeout:3000, //延迟时间
    method:'POST',//请求方式
    headers:{
        //请求头
        "content-Type": "application/x-www-form-urlencoded",
        'pc-token': '4a82b23dbbf3b23fd8aa291076e660ec' // 后端提供

    },
})
 
//请求拦截
Service.interceptors.request.use(config =>  config);
 
//响应拦截
Service.interceptors.response.use(response => response.data,err => console.log(err))

2）.创建index.js文件  接口函数的封装在这里配置

import {Service} from './request';
 
//获取汽车列表
export function getCarList(config){
    const params = new URLSearchParams()
    params.append('page',config.page);
 
    return Service({
        url:'./api/getCarList',
        data:params
    })
}