02. vue-cli3 프로젝트 구성

//           3.0.0
vue  -V
vue create vue3

//    
yarn add lib-flexible
yarn add postcss-px2rem
yarn add postcss-px2rem-exclude(       ui     ，  px     rem)

 main.js     
import 'lib-flexible'

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`,
    },
  },
};

  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
      }
    },
  },

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,
  },