创建VUE3项目+ element plus / Vant4 框架前提条件：已安装 18.3 或更高版本的 No

前提条件：

已安装 18.3 或更高版本的 Node.js

基于 vite 创建项目

## 1.创建命令
npm create vue@latest

## 2.具体配置

## 配置项目名称
√ Project name: vue3_test

## 是否添加TypeScript支持
√ Add TypeScript?  Yes

## 是否添加JSX支持
√ Add JSX Support?  No

## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No

## 是否添加pinia环境
√ Add Pinia for state management?  No

## 是否添加单元测试
√ Add Vitest for Unit Testing?  No

## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No

## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes

## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

element plus 框架

npm install element-plus --save

然后在main.ts中引用

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

// 创建应用实例
const app = createApp(App)

// 注册 Element Plus
app.use(ElementPlus)

// 挂载应用实例
app.mount('#app')

Vant4 移动端框架

// 安装 vant4
npm i vant

// 自动导入组件插件和样式插件
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

配置 vite.config.ts

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()],
      dts: "auto-imports.d.ts",
      eslintrc: {
        enabled: true, // 生成 .eslintrc-auto-import.json 文件，不要提交
      }
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

注意在tsconfig.app.json中加入指定路径

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "./components.d.ts",  // 添加这一行
    "./auto-imports.d.ts"// 添加这一行
  ],
  "exclude": [
    "src/**/__tests__/*"
  ],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

如果npm run dev 报一下错误，请执行 npm i consola -D

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'consola' imported from

注意：在使用Toast时无需import引入，直接在setup中使用即可

组件注册（推荐unplugin-vue-components）

组件全局注册

import { Button } from 'vant';
import { createApp } from 'vue';

const app = createApp();

// 方式一. 通过 app.use 注册
// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
app.use(Button);

// 方式二. 通过 app.component 注册
// 注册完成后，在模板中通过 <van-button> 标签来使用按钮组件
app.component(Button.name, Button);

组件全量注册（不推荐，注册所有组件会引入所有组件的代码，导致包体积增大。）

import Vant from 'vant';
import { createApp } from 'vue';

const app = createApp();

app.use(Vant);

// Lazyload 指令需要单独进行注册
app.use(vant.Lazyload);

<script setup>
  import { Button } from 'vant';
</script>

<template>
  <Button />
</template>

浏览器适配

底部安全区适配

<!-- 在 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"
/>

<!-- 开启顶部安全区适配 -->
<van-nav-bar safe-area-inset-top />

<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />

Viewport 布局

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

npm install postcss-px-to-viewport

创建postcss.config.js，粘贴以下代码到 postcss.config.js 中

const path = require("path");

module.exports = ({ webpack }) => {
  const designWidth = webpack.resourcePath.includes(
    path.join("node_modules", "vant")
  )
    ? 375
    : 750;

  return {
    plugins: {
      autoprefixer: {},
       "postcss-px-to-viewport": {
          unitToConvert: "px", // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度
          unitPrecision: 3, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          landscape: false, // 是否处理横屏情况
        },
    },
  };
};

Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。

Rem 布局适配

如果需要使用 rem 单位进行适配，推荐使用

npm install postcss-pxtorem --save

同上postcss.config.js中添加下面代码

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿的根字体大小
      propList: ['*'], // 指定转换的属性列表
      selectorBlackList: [], // 指定不转换的类名
      replace: true, // 替换包含 rem 的规则，而不是添加回退规则
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      minPixelValue: 0, // 小于或等于此值的不转换
      exclude: /node_modules/(?!vant)/, // 排除某些文件夹
    },
  },
};

axios

 npm install axios

vue-router

npm install vue-router

创建VUE3项目+ element plus / Vant4 框架