手把手教你搭建Vite+Vue3+VantUI开发环境（移动端开发）

前置条件

首先你的电脑已经安装了NodeJs

NodeJs中文官网：http://nodejs.cn/

NodeJs安装

NodeJs的安装比较简单，基本上就是从官网把安装文件下载下来，然后双击安装就可以了，安装完NodeJs后那么你本地的命令行工具就可以使用npm命令了

Vite脚手架安装Vue3项目目录

// vue3-vant就是最终生成的项目名npm init vite@latest vue3-vant — –template vue

生成的项目目录结构

// 进入目录cd vue3-vant// 安装依赖npm install// 启动开发环境npm run dev

启动的页面效果

项目默认是在3000端口打开，在浏览器输入http://localhost:3000/就能看到如上效果

VantUI引入

// 项目根目录下安装vant3的依赖包npm i vant@3 -S

导入所有组件（不推荐）

不推荐这么做，移动端当然是加载速度越快越好，全部导入会导致包体积过大，影响首次加载速度

修改项目的入口文件main.js，引入安装的vant依赖包

import { createAPP } from ‘vue’import App from ‘./App.vue’// 引入vant的样式文件import ‘vant/lib/index.css’// 导入vant的依赖包import Vant from ‘vant’createApp(App).use(Vant).mount(‘#app’)

修改App.vue文件，测试是否引入成功

<script setup></script><template>  <van-button type=”primary”>主要按钮</van-button></template><style>#app {  height: 100%;}</style>

引入成功

按需引入组件（推荐）

安装vite-plugin-style-import插件

npm i vite-plugin-style-import -D

修改vite.config.js文件

import { defineConfig } from “vite”;import vue from “@vitejs/plugin-vue”;import styleImport, { VantResolve } from “vite-plugin-style-import”;export default defineConfig({  plugins: [    vue(),    styleImport({      resolves: [VantResolve()],    }),  ],});

Rem 布局适配

Rem适配的话，可以让布局随着移动端设备的尺寸自适应调整

首页安装postcss-pxtorem、lib-flexible两个依赖包

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

// postcss-pxtorem依赖包npm i postcss postcss-pxtorem -D// lib-flexible依赖包npm i amfe-flexible -S

修改main.js文件，引入amfe-flexible

import { createApp } from “vue”;import App from “./App.vue”;// 引入amfe-flexibleimport ‘amfe-flexible’// 按需导入vant的依赖包import { Button } from “vant”;createApp(App).use(Button).mount(“#app”);

PostCSS 示例配置

在项目根目录下增加postcss.config.js

// postcss.config.jsmodule.exports = {  plugins: {    ‘postcss-pxtorem’: {      rootValue: 37.5,      propList: [‘*’],    },  },};

Sass支持

直接安装sass依赖包，不需要修改任何配置就能支持

npm i sass -D

至此Vite+Vue3+VantUI开发环境就搭建好了

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧