前端学习篇 -- ui 库导入

1、vant

1.1 安装

npm i vant -S

1.2 按需引入

// 安装插件
npm i babel-plugin-import -D

// babel.config.js 中配置
module.exports = {
    
    
  plugins: [
    ['import', {
    
    
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

// plugins/vant.js
import Vue from 'vue'
import {
    
     Button } from 'vant'

Vue.use(Button)

2、移动端适配

npm i amfe-flexible -S
npm i postcss-pxtorem -D

// main.js 引入手淘
import 'amfe-flexible'

// vue.config.js 配置
module.exports = {
    
    
  css: {
    
    
    loaderOptions: {
    
    
      postcss: {
    
    
        plugins: [
          require("autoprefixer")({
    
    
            // 配置使用 autoprefixer
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8']
          }),
          require("postcss-pxtorem")({
    
    
            rootValue: 37.5,
            //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            propList: ["*"],
          })
        ]
      }
    }
  }
};

3、element

3.1 安装

npm i element-ui -S

3.2 按需引入

# 安装插件
npm install babel-plugin-component -D

// babel.config.js 中配置
module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', {
    
     modules: false }]
  ],
  plugins: [
    [
      'component',
      {
    
    
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

// plugins/element.js
import Vue from 'vue'
import {
    
     Row, Button } from 'element-ui'

Vue.use(Row)
Vue.use(Button)