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

2023-07-04 21:09:03 328

一.涉及技术点

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

二.步骤

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

npminit@vitejs/appmy-vue-app--templatevue-ts

配置路由

npminstallvue-router@4--save

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

import{createRouter,createWebHashHistory,RouteRecordRaw}from"vue-router";
constroutes:Array=[
{
path:"/",
name:"Home",
meta:{
title:"首页",
keepAlive:true
},
component:()=>import("../views/Home/index.vue"),
},
{
path:"/login",
name:"Login",
meta:{
title:"登录",
keepAlive:true
},
component:()=>import("../views/Login/index.vue"),
},
];
constrouter=createRouter({
history:createWebHashHistory(),
routes
});
exportdefaultrouter;

在main.ts挂载路由

import{createApp}from'vue'
importAppfrom'./App.vue'
importrouterfrom"./router";createApp(App)
.use(router)
.mount('#app')

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

安装

npmivuex@next--save

配置

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

import{createStore}from"vuex";
exportdefaultcreateStore({
state:{
listData:{1:10},
num:10
},
mutations:{
setData(state,value){
state.listData=value
},
addNum(state){
state.num=state.num+10
}
},
actions:{
setData(context,value){
context.commit('setData',value)
},
},
modules:{}
});

挂载

在main.ts挂载数据中心

import{createApp}from'vue'
importAppfrom'./App.vue'
importrouterfrom"./router";
importstorefrom"./store";
createApp(App)
.use(router)
.use(store)
.mount('#app')

Vant3

安装

npmivant@next-S

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

在main.ts全局引入样式

import{createApp}from'vue'
importAppfrom'./App.vue'
importrouterfrom"./router";
importstorefrom"./store";
import'vant/lib/index.css';//全局引入样式
createApp(App)
.use(router)
.use(store)
.use(ant)
.mount('#app')

移动端适配

安装postcss-pxtorem

npminstallpostcss-pxtorem-D

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

module.exports={
"plugins":{
"postcss-pxtorem":{
rootValue:37.5,
//Vant官方根字体大小是37.5
propList:['*'],
selectorBlackList:['.norem']
//过滤掉.norem-开头的class，不进行rem转换
}
}
}

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

//rem等比适配配置文件
//基准大小
constbaseSize=37.5
//注意此值要与postcss.config.js文件中的rootValue保持一致
//设置rem函数
functionsetRem(){
//当前页面宽度相对于375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
constscale=document.documentElement.clientWidth/375
//设置页面根节点字体大小（“Math.min(scale,2)”指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize=baseSize*Math.min(scale,2)+'px'
}
//初始化
setRem()
//改变窗口大小时重新设置rem
window.onresize=function(){
console.log("我执行了")
setRem()
}

在mian.ts引入

import"./utils/rem"

配置网络请求axios

安装

npmi-saxios

配置axios

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

importaxiosfrom"axios";
constservice=axios.create({
baseURL,
timeout:5000//requesttimeout
});
//发起请求之前的拦截器
service.interceptors.request.use(
config=>{
//如果有token就携带tokon
consttoken=window.localStorage.getItem("accessToken");
if(token){
config.headers.common.Authorization=token;
}
returnconfig;
},
error=>Promise.reject(error)
);
//响应拦截器
service.interceptors.response.use(
response=>{
constres=response.data;

if(response.status!==200){
returnPromise.reject(newError(res.message||"Error"));
}else{
returnres;
}
},
error=>{
returnPromise.reject(error);
}
);
exportdefaultservice;

使用

importrequestfrom"../utils/request";
request({url:"/profile",method:"get"})
.then((res)=>{
console.log(res)
})

配置请求代理

vite.config.ts

import{defineConfig}from'vite'
importvuefrom'@vitejs/plugin-vue'
importpathfrom'path';

//https://vitejs.dev/config/
exportdefaultdefineConfig({
plugins:[vue()],
base:"./",//打包路径
resolve:{
alias:{
'@':path.resolve(__dirname,'./src')//设置别名
}
},
server:{
port:4000,//启动端口
open:true,
proxy:{
//选项写法
'/api':'http://123.56.85.24:5000'//代理网址
},
cors:true
}

})

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

三.vite对和的支持格外友好

正常写法


import{defineComponent}from"vue";
import{useRouter}from"vue-router";
exportdefaultdefineComponent({
setup(){
constrouter=useRouter();
constgoLogin=()=>{
router.push("/");
};
return{goLogin};
},
});

写法

import{useRouter}from"vue-router";
constrouter=useRouter();
constgoLogin=()=>{
router.push("/");
};

是不是简洁了很多

如何用？

conststate=reactive({
color:"#ccc",
});

就这么简单！

代码

原文地址：zhuanlan.zhihu.com/p/351888882

线上预览：http://123.56.85.24/vite/#/

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

vitejs中文网:https://cn.vitejs.dev/

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。