下载
npm i vant
全局引用
import vant from 'vant'
import 'vant/lib/index.css'//引入样式
export function createApp() {
const app = createSSRApp(App)
app.use(vant)
return {
app
}
}
页面使用(直接使用)
<van-button type="success">成功按钮</van-button>
移动端适配
npm install postcss-px-to-viewport
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtovw from 'postcss-px-to-viewport'
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
pxtovw({
// 更多配置参考:https://github.com/evrone/postcss-px-to-viewport
viewportWidth: 750, // 设计稿宽度
unitPrecision: 2, // 保留小数点后2位
exclude: [/node_modules/], //忽略哪些文件转换
})
]
}
},
})