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、调用实例

单色按钮

单色按钮

渐变色按钮

买家下单

商家接单

买家提货

交易完成

import { Step, Steps } from 'vant';

export default {

name: 'Home',

components: {

[Steps.name]: Steps, // 两种写法都可以，这种更简单，确保与官网一致

'van-step': Step

}

};

总结

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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。