# base-vue2

**Repository Path**: funren/base-vue2

## Basic Information

- **Project Name**: base-vue2
- **Description**: Vue2 单页应用基础配置
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-12
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# VUE2 单页应用 基础配置

- base-vue2 是采用 Vue2 全家桶搭建基础项目

# 介绍

### 移动端css适配

- 已配置移动端适配，px 自动转 viewport 单位；（注意行内样式中px无法转换）
- 可在 postcss.config.js 文件中修改设计稿尺寸,默认尺寸375；


### scss 全局变量配置

- 所有scss全局变量配置文件，需放置到 src/style 文件夹中。
- src/style 中所有 .scss 文件中scss变量将自动注入到全局，项目中可直接使用，无需import；

### vuex 配置

- 已拆分为单文件管理。
- mutation-type 用于管理函数名。


### axios 配置 
- 已对 axios 的 get、post 进行二次封装；
##### 使用方法

```js
//api/index.js

//引入 axios 二次封装的 get、post 方法
import {get,post} from './common/http';

//封装项目中 ajax 请求
export const getList=get('http://www.xxx.com/api');
```

```js
// views/Home.vue

// 项目中使用
import {getList} from '@api/index'
export default {
    mounted(){
       getList({
          'uid':'0001',
       })
    }
}
```

### poxry 配置

- 已配置 poxry 代理
##### 使用方法

1. 配置API接口地址：

```js
//api/common/url.js
//支持多域名

module.exports={
    // key(自定义关键字): value(代理域名)
    // key 值用于开发环境中 proxy 代理拦截
    // value 值用于生产环境中使用

    'API':'https://www.xxx.com',
    'MZL':'https://www.uuu.com',
}
```
2. 使用接口地址：

```js
//api/index.js

// 引入二次封装的 axios 方法；
import {get,post} from './common/http';

// 引入 auto.url.js 模块，获取动态生成的API接口url地址
import URL from './common/auto.url';
const {API,MZL}=URL;

// get 请求中使用
export const getList=get(API+'/api');
```