- 首页 > it技术 > >
vue+vant|vue+vant 移动端项目（安装vant+rem适配）
#适配
//lib-flexible修改根字体大小
//autoprefixer可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题
npm install postcss-plugin-px2rem autoprefixer@8.0.0
npm i lib-flexible --save//npm i autoprefixer@8.0.0//解决版本过高的问题#public-index.html
//注释掉#main.js
import 'lib-flexible/flexible.js'新建postcss.config.js
const AutoPrefixer = require('autoprefixer')
const pxtorem = require('postcss-plugin-px2rem')
module.exports = ({ file }) => {
let remUnit
if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
remUnit = 37.5
} else {
remUnit = 75
}
return {
plugins: [
AutoPrefixer({
browsers: ['last 20 versions', 'android >= 4.0']
}),
pxtorem({
rootValue: remUnit,
propList: ['*'],
selectorBlackList: ['van-circle__layer']
})
]
}
}#新建vue.config.js
module.exports = {
devServer: {
disableHostCheck: true,
// 设置代理
proxy: {
"/api": {
target: "http://192.168.xxx.xxx", // 域名
ws: true, // 是否启用websockets
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
"^/api": "/"
}
}
}
},
lintOnSave: true
}#https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
npm i vant -S# 安装插件
npm i babel-plugin-import -D//新建 .babelrc配置按需引入
{
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}#vant使用模板
默认按钮
主要按钮
推荐阅读
