最近项目用到了vue和vant，以及自定义vant主题，记录主要步骤点如下：
1、首先需要全局安装vue-cli：
npm install -g @vue/cli
2、创建vue项目
vue create my-app
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这里选择手动。
? Please pick a preset:
default (babel, eslint)
> Manually select features
回车后选择以下配置：
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
这里的CSS pre-processor 选择 Less。
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
稍等一会，项目就创建完毕啦。
进入项目目录：
cd my-app
运行项目：
npm run serve
打开浏览器看到如下界面，vue项目到此就创建成功啦。
image.png
3、安装Vant
npm i vant -S
package.json中看到vant，就安装完成了。
image.png
4、引入Vant
这里选择自动按需引入组件
安装babel插件
npm i babel-plugin-import -D
在babel.config.js 中配置：
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
style: (name) => `${name}/style/less`
},
'vant'
]
]
}
在main.js中按需引入，如下：
import { Button, Col, Row } from 'vant'
Vue.use(Button)
.use(Col)
.use(Row)
5、自定义Vant主题
src下新建style目录，新建myvant.less文件用于自定义vant主题样式。
image.png
可以根据需要修改vant基础样式变量，以适应项目需求，这里我改了@red，@blue等颜色。
image.png
也可以修改某个组件的样式变量。
image.png
vue.config.js中配置：
*myvant.less就是自定义主题的less文件。引入less文件，以下两种方式都可以。
方式一：
const path = require('path')
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
modifyVars: {
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "${path.join(
__dirname,
'./src/style/myvant.less'
)}";`
}
}
}
}
}
方式二：
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
modifyVars: {
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: 'true; @import "~@/style/myvant.less"'
}
}
}
}
}
6、查看效果
app.vue中引用组件
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<van-row gutter="20">
<van-col span="8">
<van-button type="primary">主要按钮</van-button>
</van-col>
</van-row>
<!-- <router-view/> -->
</div>
</template>
可以看到button的背景色，border-radius已经是myvant.less中定义的@green: #33f892;和@button-border-radius: 8px;
接下来就可以按项目需要自由发挥啦。
image.png
