Vue3 项目初始化(二) 引入vant + sass+ postcss

1. 引入vant

npm i vant

按需引入

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

vite.config.js 

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

2. 引入sass

npm install sass sass-loader -S

创建 /src/styles/variables.scss  

$defaultColor: red;

修改vite.config.ts

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/style/mixin.scss";` // 此处全局的scss文件
      }
    }
  }
})

页面使用

<template>
  <div class="about">
    <van-button type="primary">button</van-button>
    <span class="redSpan">sadasdad</span>
  </div>
</template>
<script setup lang="ts">
const a = 1

console.error(a)
</script>
<style lang="scss" scoped>
.redSpan {
  color: $defaultColor;
}
</style>

3. postcss

参考链接:rem适配方案

安装amfe-flexible动态计算html的font-szie

npm i amfe-flexible -S

在main.js中引入amfe-flexible 

import 'amfe-flexible'

安装postcss-pxtorem 

npm i postcss-pxtorem @types/postcss-pxtorem -D

// Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中
import postCssPxToRem from 'postcss-pxtorem'
 
css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: [] // 要忽略并保留为px的选择器
        })
      ]
    }
},
 

 设置 meta 

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>