vite+vue3使用vant和适配移动端+scss

1.安装 vant 命令：npm i vant

2.在 vite 项目中按需引入组件（推荐） 命令:npm i vite-plugin-style-import@1.4.1 -D

3.安装完成后，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
};
 

使用方式： 

适配移动端：

1.设计稿是750的安装这个两个

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
•    安装命令：  npm install postcss postcss-pxtorem --save-dev
• lib-flexible 用于设置 rem 基准值
•   安装命令： npm i -S amfe-flexible

2.新建postcss.config.js 跟vite.config.js 同级

写上

module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            propList: ['*'],
        },
    },
};

3.在main.js 引入

import 'amfe-flexible'

4.安装 

npm install sass-loader -D

npm install node-sass -D

使用 <style lang="scss" scoped> </style>