# webChat-web

**Repository Path**: lc5102/webChat-web

## Basic Information

- **Project Name**: webChat-web
- **Description**: vue+vux+socketIO 研究web聊天----前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目中使用的插件

## px2rem 适配移动端

### 安装依赖 (lib-flexible 和 px2rem-loader)
    //lib-flexible
    cnpm install lib-flexible --save-dev
    //px2rem-loader
    cnpm install px2rem-loader --save-dev
#### 引入lib-flexible
    |-main.js  
        import 'lib-flexible'

#### 配置px2rem-loader
    |-util.js

    //在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素
        var px2remLoader = {
            loader: 'px2rem-loader',
            options: {
                remUnit: 75 // 设计稿的宽度/10
            }
        }
    //并放进 loaders 数组中
    function generateLoaders(loader, loaderOptions) {
        var loaders = [cssLoader, px2remLoader]
        .......

#### 重新启动

## sass  （css预编译处理）

### 安装依赖
    cnpm install node-sass --save-dev
    cnpm install sass-loader --save-dev

### 配置
   // 打开webpack.base.config.js在loaders里面加上
   
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },

## vux   UI框架的使用

### 安裝

    cnpm install vux --save
    
    cnpm install vux-loader  --save

    cnpm install less-loader --save 
### 配置 

        
    //vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：
    const vuxLoader = require('vux-loader')
    const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
    
    module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
    })
    
### 使用 https://doc.vux.li/zh-CN/components/actionsheet.html

### <font color=red>注意：使用px2rem 导致vux样式缩小</font>

### 解决方法： https://www.javascriptcn.com/read-44181.html

    在build/webpack.base.conf.js里参照如下代码进行配置
    module.exports = vuxLoader.merge(webpackConfig, {
        plugins: [
            {
                name: 'vux-ui'
            },
            {
                name: 'after-less-parser',
                fn: function (source) {
                    if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {
                        source = source.replace(/px/g, 'PX')
                    }
                    // 自定义的全局样式大部分不需要转换
                    if (this.resourcePath.replace(/\\/g, '/').indexOf('App.vue') > -1) {
                        source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')
                    }
                    return source
                }
            },
            {
                name: 'style-parser',
                fn: function (source) {
                    if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {
                        source = source.replace(/px/g, 'PX')
                    }
                    // 避免转换1PX.less文件路径
                    if (source.indexOf('1PX.less') > -1) {
                        source = source.replace(/1PX.less/g, '1px.less')
                    }
                    return source
                }
            }
        ]
    })