1.在vue2项目中通过npm的下载安装vant2
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
#安装vant2
npm i vant@latest-v2 -s//普通npm
cnpm i vant@latest-v2 -S//淘宝镜像
当看package.json,中有了红框的内容代表安装成功
2.安装babel-plugin-import插件按需引入组件
npm i babel-plugin-import -d
cnpm i babel-plugin-import -D//淘宝镜像
- 安装成功后,在babel.config.js文件中写入以下代码进行配置
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
- 在src下新建config文件夹,新建vant.config.js文件,在此文件里按需引用组件
- 在main.js文件中引入vant.config.js文件,之后就可以在页面里直接使用组件
在写移动端的时候,一直为了适配烦恼。postcss-px-to-viewport是一个很完美的插件,通过将px转化为vw、vh。主要适用于移动端。
3.安装插件 postcss-px-to-viewport -屏幕适配
1.安装插件
npm install postcss-px-to-viewport --save-dev //安装插件
yarn add -D postcss-px-to-viewport
2.新建文件postcss.config.js,内容如下:
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
viewportWidth: 750, //视窗的宽度,对应设计稿的宽度
viewportHeigth: 667, //视窗的高度
unitPrecision: 5, //指定'px'转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
selectorBlackList: [], //指定不需要转换的类
minPixelValue: 1, //最小转换值
mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询,再对一些东西进行配置
exclude: [/TabBar/] //不需要转化的组件文件名正则,必须是正则表达式
}
}
};
配置结束后, 要重启一下项目,然后在写项目的时候,就可以放心大胆的使用px等单位了。在页面上会自动变成vw和vh去适配不同的屏幕。