# class_2012

**Repository Path**: xielong196/class_2012

## Basic Information

- **Project Name**: class_2012
- **Description**: 这是班级上传作业仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-18
- **Last Updated**: 2024-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# msmk

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


###  移动端开发  界面ui是多少    750   320的n倍   640  960    pc端开发  界面uis大小   屏幕分辨率1024*768（long long ago）  1280*1024      1920     2048    2560



###  vant 按需加载
        cnpm i vant -S
        cnpm i babel-plugin-import -D 
    
    babel7 的用户，可以在 babel.config.js 中配置
    module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ['import', {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
        }, 'vant']
    ]
    }


    组件中
    import { Button } from 'vant';
    
    components:{
        [Button.name]:Button
    },
    
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>


### 屏幕适配：  rem原理   
    postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
    lib-flexible 用于设置 rem 基准值
    
    cnpm  i  postcss-pxtorem lib-flexible --save-dev
    
    新建 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,  // 根字体大小，如果设计图是750的话 记得除2
                unitPrecision: 3,
                propList: ['*'], // 作用在哪些属性上 我这里用的是通配符
                selectorBlackList: ['vant-'], // 将哪些html元素排除在外，我这里添加了一个				vant的
                replace: true,
                mediaQuery: false,
                minPixelValue: 2,
                exclude: /node_modules/i
            })
            ]
        }
        }
    }
    }
    
    重启项目：  
    页面中写一个按钮，这个按钮的大小在设计图（750的设计图）上的宽度是540px 高度是100px。那么我们在书写css代码的时候就应该除以2（因为我们设置的根字体大小是37.5）