Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。
这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。
Vite的优点
Vite官网介绍地址：https://vitejs.dev/
使用Vite的优点：最简单直观的一点，那就是快。
和Webpack相比，Vite 具有以下特点：
快速的冷启动，不需要等待打包。
即时的热模块更新。
真正的按需编译，不用等待整个项目编译完成。
由于完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用。
几乎是秒启动，每次更改立刻能够看到效果。
Vite项目创建
习惯于用yarn,nodejs建议安装12.13版本或以上，否则安装最新的vue-cli会报错。
若没有安装yarn,建议安装个，它比npm好用且稳定，Yarn是facebook发布的一款取代npm的包管理工具。
npm install -g yarn
Yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可
yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
基于Vite和Vue3的模板工程创建步骤：
# step1 yarn create vite + name + template yarn create vite my-vue-app --template vue #step2 cd my-vue-app #step3 yarn #atlast yarn dev
集成最新的路由组件 Vue-Router 4.0
yarn add vue-router@next
集成Vant UI移动端组件库
Vant介绍：
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
官方文档地址：Vant - Mobile UI Components built on Vue
Vant安装：
# 通过 yarn 安装 yarn add vant@3
引入vant组件：
对于 vite 项目，使用 vite-plugin-style-import 实现按需引入, 原理和 babel-plugin-import 类似。
1. # 安装插件 2. yarn add vite-plugin-style-import -D
修改vite.config.js文件：
// 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`, }, ], }), ], };
注意：类似 import navBar from '@/components/NavBar.vue' 中的@符号，是需要配置才能支持的。这个@符号的作用就相当于一个别名，方便书写和不易出错。后缀的.vue扩展名，也可以改下配置忽略掉不用每次引用都带扩展名，配置extensions属性。
vite 添加别名(类似webpack的resolve.alias)方法：
修改vite.config配置
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style-import' //import { join } from 'path' //function resolve(dir){ // return join(__dirname,dir) //} // https://vitejs.dev/config/ const path = require('path') export default defineConfig({ plugins: [vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ], resolve:{ alias:{ '@': path.resolve(__dirname, 'src'), }, extensions: ['.js', '.vue','.json'], }, })
移动端 rem 适配
如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发rem 是需要做一下的，Vant 官方也为我们提供了方案，如下图所示：
yarn add lib-flexible -S yarn add postcss-pxtorem -D
这里 lib-flexible 是网页做 html 的 font-size 适配用的，所以需要安装到 dependencies。而 postcss-pxtorem 是在编译的时候对 px 单位转换为 rem 单位时使用，所以安装到 devDependencies 便可。
安装好后，我们需要在 main.js 引入 lib-flexible
接着需要为 px 单位转 rem 单位做配置：
Vue CLI项目可以在根目录声明 .postcssrc.js 文件，但是目前 Vite 创建的项目已经不支持这种形式的配置文件了，而是需要 postcss.config.js 文件，配置内容如下：
// postcss.config.js // 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃 // 具体配置可以去 postcss-pxtorem 仓库看看文档 module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换 } } }
如何验证是配置成功了？可以打开浏览器查看下dom元素的属性，原来是px的有没有变成rem.
如源文件里设置的是：
<style scoped> .test { width: 100px; height: 100px; background-color: aquamarine; } </style>
浏览器里查看看到的如下图所示则是配置生效了：
测试
可以写一个Test.vue放在views/目录下作为vant和rem配置是否生效的测试：
<template> <div class="test">我是测试</div> <div>我是vant按钮</div> <van-button type="primary" size="large">大号按钮</van-button> </template> <script> export default { } </script> <style scoped> .test { width: 100px; height: 100px; background-color: aquamarine; } </style>
配置下router路由，访问这个测试页面看看效果。vue-router的配置：
在src文件夹下新建router文件夹，里面增加一个index.js文件：
// src/router/index.js import { createRouter, createWebHashHistory } from 'vue-router' import Test from '../views/Test.vue' import Home from '../views/Home.vue' // createRouter 创建路由实例 const router = createRouter({ history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory routes: [ { path: '/test', component: Test }, { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: Home, meta: { index: 1 } }, ] }) // 抛出路由实例, 在 main.js 中引用 export default router
App.vue中挂在router：
<template> <router-view /> </template> <script> export default { name: 'App' } </script>
main.js中，全局注册用到的组件库。
//main.js import { createApp } from 'vue' import 'lib-flexible/flexible' import App from './App.vue' import { Button } from 'vant' import { Icon } from 'vant' import { Swipe, SwipeItem } from 'vant' import router from './router' //import 'vant/lib/index.css'; // 全局引入样式 const app = createApp(App) // 创建实例 app.use(Button).use(Icon).use(Swipe).use(SwipeItem) // 注册组件 app.use(router) app.mount('#app')
最后看到的效果：
引用：
学习 Vue 你需要知道的 webpack 知识（一） - 知乎
