有赞vant按需加载、主题及全局变量

1、vue 脚手架安装

   版本是基于2.x + 以上

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

2、vant 安装

# Vue 2 项目，安装 Vant 2.x 版本：
npm i vant -S

# Vue 3 项目，安装 Vant 3.x 版本：
npm i vant@next -S

3、安装按需加载插件

npm i babel-plugin-import -D

4、配置按需插件调用

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // style: true
    }, 'vant']
  ]
};

5、主题样式

// 调整babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // style: true
      style: name => `${name}/style/less`  // 注意这里变了
    }, 'vant']
  ]
}

主题文件

// vue.config.js
css:{
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'hack': `true; @import "${path.join(
                __dirname,
                './src/assets/css/theme.less'
            )}"; 
            @import "${path.resolve(__dirname, './src/assets/css/variables.less')}";  
          `
          }
        }
     }
}

6、全局less样式引入

部分小伙伴看上面可能已经发现了，这里多了一个variables.less文件，这个我建议单独一个文件不与主题文件搞在一起,【言外之意放在一起也可以】
    modifyVars: {
            'hack': `true; @import "${path.join(
                __dirname,
                './src/assets/css/theme.less'
            )}";
            @import "${path.resolve(__dirname, './src/assets/css/variables.less')}";
            `
       }

   这里有几点注意一下，也是大意了，导致的走了部分弯路。

自定义变量少了分号导致一直以为上面的方式不正确，用来网上方式一、二、三 （style-resources-loader 之类）都不行哈，细心很重要哈

7、常用组件全局注册【减少每个页面调用还要先注册】

// mian.js
import {
 Button
} from 'vant';

// vue2.X
Vue.use(Button)

// vue3.x
app.use(Button)

8、调用实例

<template>
  <div class="home">
    <van-button color="#7232dd">单色按钮</van-button>
    <van-button color="#7232dd" plain>单色按钮</van-button>
    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变色按钮</van-button>
    
    <van-steps :active="active">
      <van-step>买家下单</van-step>
      <van-step>商家接单</van-step>
      <van-step>买家提货</van-step>
      <van-step>交易完成</van-step>
    </van-steps>
  </div>
</template>

<script>
import { Step, Steps } from 'vant';

export default {
  name: 'Home',
  components: {
   [Steps.name]: Steps,  // 两种写法都可以，这种更简单，确保与官网一致
    'van-step': Step
  }
};
</script>

总结

   喜欢您就收藏分享或来搞哈！