02、vue-cli3项目配置

1、初始化项目

//首先查看版本是不是大于3.0.0
vue  -V
vue create vue3

2、配置px转rem(移动端)

//下载插件
yarn add lib-flexible
yarn add postcss-px2rem
yarn add postcss-px2rem-exclude(可以忽略第三方ui组件的样式，让其px不被转化成rem)

2.1、引入lib-flexible

在main.js里面引入 
import 'lib-flexible'

2.2、项目打包文件添加时间戳(防止文件缓存)

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem-exclude')({
            remUnit: 75,
            exclude: /node_modules/i,
          }),
        ],
      },
    },
  },
  publicPath: process.env.NODE_ENV === 'production'?'/build':'',
  configureWebpack: {
    output: {
      // 输出重构
      filename: `[name].${Date.now()}.js`,
      chunkFilename: `[name].${Date.now()}.js`,
    },
  },
};

3、下面配置ui框架vant

下载vant  yarn add vant
//在babel.config.js配置
plugins: [
  [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: name => `${name}/style/less`//上图中配置的定制主题
      },
      "vant"
    ]
  ]
//在vue.config.js里面配置
const customTheme=require('./theme')
css: {
   loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem-exclude')({
            remUnit: 75,
            exclude: /node_modules/i,
          }),
        ],
      },
      less:{   //新增
        modifyVars:customTheme.theme
      }
    },
  },

新建theme.js,内容如下：

module.exports.theme={
  '@button-info-background-color':"#d83d33",
  '@button-info-border-color':"#d83d33"
}

使用组件：

import {Button,Popup,Swipe,SwipeItem} from 'vant';
components: {
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },