vite vue2.0,vue3.0 vite
这篇文章主要介绍了vite2.0 vue3移动端项目实战详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一.涉及技术点
轻快地版本
vue3
分时（同分时)
集成路由
集成状态管理
集成爱可信
配置Vant3
移动端适配
请求代理
二.步骤
请注意只需要一行命令
NPM init @ vite js/app my-vue-app-template vue-ts
配置路由
新公共管理安装vue-路由器@4 -保存
在科学研究委员会下新建路由器目录，新建index.ts文件
从" vue路由器"导入{ createRouter，createWebHashHistory，RouteRecordRaw }。
const routes:ArrayRouteRecordRaw=[
{
路径："/",
姓名：家，
元：{
标题： 首页，
保持活动状态：真
},
组件：()=导入(./views/Home/index.vue )，
},
{
路径："/登录"，
名称：登录，
元：{
标题： 登录，
保持活动状态：真
},
组件：()=导入(./views/Login/index.vue )，
},
];
const router=createRouter({
history: createWebHashHistory()，
路线
});
导出默认路由器；
在主页面挂载路由
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入路由器./路由器；创建应用程序。使用（路由器)。挂载(#应用程序)
配置数据中心vuex（4.x）
安装
npm i vuex@next -保存
配置
在科学研究委员会下创建商店目录，并在商店下创建index.ts
从" vuex "导入{ createStore }；
导出默认的createStore({
状态：{
列表数据：{1:10},
数字：10
},
突变：{
setData(状态，值){
state.listData=value
},
添加数量(州){
状态编号=状态编号10
}
},
动作：{
setData(上下文，值){
context.commit(setData ，值)
},
},
模块：{}
});
挂载
在主页面挂载数据中心
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入路由器./路由器；
从导入存储./store ；
创建应用程序。使用（路由器)。使用（存储)。挂载(#应用程序)
Vant3
安装
npm i vant@next -S
轻快地版本不需要配置组件的按需加载，因为Vant 3.0内部所有模块都是基于放电合成法(电合成法的缩写)编写的，天然具备按需引入的能力，但是样式必须全部引入137.2k
在主页面全局引入样式
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入路由器./路由器；
从导入存储./store ；
导入" vant/lib/index。CSS”；//全局引入样式
创建应用程序。使用（路由器)。使用（存储)。使用（蚂蚁)。挂载(#应用程序)
移动端适配
安装postcss-pxtorem
新公共管理安装postcss-pxtorem -D
在根目录下创建postcss.config.js
模块。导出={
插件:{
postcss-pxtorem :
根值：37.5,
//Vant官方根字体大小是37.5
propList: [* ，
selectorBlackList: [ .norem]
//过滤掉。诺雷姆-开头的类，不进行雷姆转换
}
}
}
在根目录科学研究委员会中新建跑龙套目录下新建rem.ts等比适配文件
//rem等比适配配置文件
//基准大小
const baseSize=37.5
//注意此值要与postcss.config.js文件中的根值保持一致
//设置雷姆函数
函数setRem () {
//当前页面宽度相对于375宽的缩放比例，可根据自己需要修改，一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
const scale=文档。documentelement。客户端宽度/375
//设置页面根节点字体大小(" Math.min(scale，2)"指最高放大比例为2,可根据实际业务需求调整)
文档。文档元素。风格。字体大小=baseSize * math。最小(刻度，2)像素
}
//初始化
塞特雷姆()
//改变窗口大小时重新设置雷姆
window.onresize=function () {
console.log(我执行了)
塞特雷姆()
}
在mian.ts引入
"导入"。/utils/rem
配置网络请求axios
安装
npm i -s axios
配置爱可信
在科学研究委员会创建实用工具文件夹，并在实用工具下创建请求。分时（同timesharing）
从" axios "导入axios
const service=axios.create({
baseURL，
超时：5000 //请求超时
});
//发起请求之前的拦截器
服务。截击机。请求。使用(
配置={
//如果有代币就携带托肯
常量标记=窗口。本地存储。getitem(访问令牌)；
if (token) {
配置。标题。常见。授权=令牌；
}
返回配置；
},
错误=承诺。拒绝（错误)
);
//响应拦截器
服务。拦截器。响应。使用（
响应={
const res=response.data
if (response.status！==200) {
回报承诺。reject(new Error(RES . message Error )；
}否则{
返回表示留数
}
},
错误={
返回承诺。拒绝(错误);
}
);
导出默认服务；
使用
导入请求自./utils/request ；
请求({url: /profile ，方法： get})。然后((res)={
console.log(res)
})
配置请求代理
vite.config.ts
从“维特”导入{ defineConfig }
从@vitejs/plugin-vue 导入某视频剪辑软件
从"路径"导入路径；
//https://vitejs.dev/config/
导出默认定义配置({
插件：[vue()]，
基底：。/,//打包路径
解决：{
别名：{
@: path.resolve(__dirname， ./src)//设置别名
}
},
服务器：{
端口：4000,//启动端口
开：真的，
代理服务器：{
//选项写法
/API : http://123。56 .85 .24:5000 //代理网址
},
没错
}
})
以上，一个最基本的移动端开发配置完成。
三. vite对script setup 和style vars的支持格外友好
正常写法
脚本语言
从“vue”导入{定义组件}；
从" vue路由器"导入{用户外部}；
导出默认定义组件({
setup() {
const router=user outer()；
const goLogin=()={
路由器。push(/)；
};
返回{ goLogin }；
},
});
/脚本
脚本设置写法
脚本语言设置
从" vue路由器"导入{用户外部}；
const router=user outer()；
const goLogin=()={
路由器。push(/)；
};
/脚本
是不是简洁了很多
风格变量如何用？
脚本语言设置
恒定状态=反应({
颜色： #ccc ，
});
/脚本
风格。文本{
颜色：v-bind(状态。颜色’)；
}
/风格
就这么简单！
代码
原文地址：zhuanlan.zhihu.com/p/351888882
线上预览：http://123.56.85.24/vite/#/
代码地址：github。com/霍青朱/vu-vite-ts-Vant
维特伊斯中文网：https://cn.vitejs.dev/
到此这篇关于vite2.0 vue3移动端项目实战详解的文章就介绍到这了，更多相关vite2.0 vue3项目实战内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。