vite2.0+vue3移动端项目实战详解

一.涉及技术点

• vite版本
• vue3
• ts
• 集成路由
• 集成vuex
• 集成axios
• 配置vant3
• 移动端适配
• 请求代理

二.步骤

vite+ts+vue3只需要一行命令

配置路由

在src下新建router目录，新建index.ts文件

在main.ts挂载路由

配置数据中心vuex（4.x）

安装

配置

在src下创建store目录，并在store下创建index.ts

挂载

在main.ts挂载数据中心

vant3

安装

vite版本不需要配置组件的按需加载，因为vant 3.0 内部所有模块都是基于 esm 编写的，天然具备按需引入的能力，但是样式必须全部引入137.2k

在main.ts全局引入样式

移动端适配

安装postcss-pxtorem

在根目录下创建postcss.config.js

在根目录src中新建util目录下新建rem.ts等比适配文件

在mian.ts引入

配置网络请求axios

安装

配置axios

在src创建utils文件夹,并在utils下创建request.ts

使用

配置请求代理

vite.config.ts

 以上，一个最基本的移动端开发配置完成。

三. vite对<script setup> 和<style vars>的支持格外友好

正常写法

是不是简洁了很多

就这么简单！

代码

原文地址：

线上预览：

代码地址：github.com/huoqingzhu/vue3-vite-ts-vant

vitejs中文网:

到此这篇关于vite2.0+vue3移动端项目实战详解的文章就介绍到这了,更多相关vite2.0+vue3项目实战内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！