1、安装vue-cli3脚手架
npm install -g @vue/cli
2、通过vue-cli3创建项目
vue create my-project
3、安装vant
通过 npm 安装
npm i vant -S
通过 yarn 安装
yarn add vant
4、引入组件
安装插件
npm i babel-plugin-import -D
// 在.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、Rem 适配
Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
下载
npm install px2rem-loader --save
npm install amfe-flexible --save
main.js引入:
import 'amfe-flexible/index.js';
根目录创建文件
文件 postcss.config.js 参考内容
// 最新写法
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
],
},
"postcss-pxtorem": {
rootValue: 37.5,
propList: ["*"],
},
},
};