# msmk

**Repository Path**: fly675562427/msmk

## Basic Information

- **Project Name**: msmk
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-24
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 使用vue cli4+vant搭建的自适应项目
### 其中自适应使用的是vant中的rem适配
1. 在src同级目录下常见vue.config.js配置文件  
* 这是基础配置
``` javascript
module.exports = {
    outputDir: 'dist',   //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8081', 
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新
        proxy: null,
    }
}
```
* 要实现代理的话  
在vue-cli中配置proxy，将API请求代理到API服务器上。设置devServer.proxy
```js
devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8080',
        https: false,
        hotOnly: false, 
        proxy: {
            '/api': {
                target: 'http://localhost:5050', //API服务器的地址
                ws: true,  //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '^/api': ''
                }
            }
        },
    }
    //所以若是后端的API为'/aaa/ccc'，我们需要在发请求时将路径设置为'/api/aaa/ccc',这样我们的请求才会被proxy代理到。
```

 2.  fastclick   
 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。  
 `cnpm i fastclick -S`
 ``` javascript
 //在main.js中引用
 import FastClick from 'fastclick'
 FastClick.attach(document.body)
 ```
3. 按需引入vant
``` javascript
//安装vant
npm i vant -S
//安装插件
npm i babel-plugin-import -D
//babel.config.js增加下面配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
//然后在mian.js中按需引入需要的组件

import Vue from 'vue'
import { Button,Popup } from 'vant';
Vue.use(Button).use(Popup);

```
4. Rem 适配
* postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
* lib-flexible 用于设置 rem 基准值
```javascript
npm i lib-flexible -S
npm i postcss-pxtorem -D

//main.js中增加
import 'lib-flexible'
//修改vue.config.js文件，没有这个文件就新建一个
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
          }),
          pxtorem({
            rootValue: 37.5,
            propList: ['*','!font*'],// !不匹配属性（这里是字体相关属性不转换）
            unitPrecision: 3,        // 最小精度，小数点位数
            minPixelValue:2          // 替换的最小像素值
          })
        ]
      }
    }
  }
};
```