Vue CLI3 开发vue移动端常用工具和常用webpack配置整理，vue服务端渲染

一、常用工具

1、移动端组件库

mint-ui 官网：https://mint-ui.github.io/#!/zh-cn

2、第三方插件

postcss 浏览器的适配插件
postcss官网
 npm安装包
axios 连接口的插件
axios官网
better-scroll
better-scroll官网
一般会用到pullup和pulldown 这两个插件，分别为上拉加载更多和下拉刷新

二、常用webpack配置

使用vue cli3需要手动创建 vue.config.js 文件来配置webpack

1、移动端适配

const pxtovw = require('postcss-px-to-viewport')
module.exports = {
    css: {
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },
            postcss: {
                // 这里的选项会传递给 postcss-loader
                plugins: [
                    new pxtovw({
                        unitToConvert: 'px',
                        viewportWidth: 375,
                        unitPrecision: 5,
                        propList: ['*'],
                        viewportUnit: 'vw',
                        fontViewportUnit: 'vw',
                        selectorBlackList: [],
                        minPixelValue: 1,
                        mediaQuery: false,
                        replace: true,
                        exclude: [/node_moudles/]
                    })
                ]
            }
        }
    },
}

2、给文件路径配置别名

const path=require('path')
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
        .set("assets", path.resolve(__dirname,'./src/assets/'))
        .set("views", path.resolve(__dirname,'./src/views/'))
    }
}

3、配置代理

module.exports={
//配置代理
    devServer:{
        proxy:{
            "/api":{
                target:"http://localhost:3005/",
                changeOrigin:true,
                pathRewrite:{
                    //重写路径
                    // '^/api':''
                }
            }
        }
    }
}