vite2+vant+postcss搭建移动端

vite2+vant+postcss搭建移动端

安装​​vant​​​和​​vite​​按需引入

npm install vant -snpm install vite-plugin-style-import -D

​​vite.config.js​​

import vue from '@vitejs/plugin-vue';import styleImport from 'vite-plugin-style-import';export default { plugins: [ vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ],};

​​main.js​​

import { createApp} from 'vue'import App from './App.vue'import { Button } from 'vant'const app = createApp(App)app.use(Button)app.mount('#app')

主要按钮

安装​​px转rem​​插件

npm install postcss-px2rem-exclude lib-flexible -s

新建​​postcss.config.js​​

module.exports = { plugins: { "postcss-px2rem-exclude": { remUnit: 75, remPrecision: 2, exclude: /node_modules|folder_name/i } }};

​​main.js​​

import 'lib-flexible'

​​线上源码地址​​

git clone https://github.com/skywalk94/vite-demo

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。