vite2.0+vue3移动端项目实战
关注公众号 程序员成长指北,回复“1”
添加无广告优质学习群
原文地址:zhuanlan.zhihu.com/p/351888882
作者:清风皓月
一.涉及技术点
vite版本
vue3
ts
集成路由
集成vuex
集成axios
配置Vant3
移动端适配
请求代理
二.步骤
vite+ts+vue3只需要一行命令
npm init @vitejs/app my-vue-app --template vue-ts
配置路由
npm install vue-router@4 --save
在src下新建router目录,新建index.ts文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [{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"),},
];
const router = createRouter({history: createWebHashHistory(),routes
});
export default router;
在main.ts挂载路由
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";createApp(App)
.use(router)
.mount('#app')
配置数据中心vuex(4.x)
安装
npm i vuex@next --save
配置
在src下创建store目录,并在store下创建index.ts
import { createStore } from "vuex";
export default createStore({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'
import App from './App.vue'
import router from "./router";
import store from "./store";
createApp(App)
.use(router)
.use(store)
.mount('#app')
Vant3
安装
npm i vant@next -S
vite版本不需要配置组件的按需加载,因为Vant 3.0 内部所有模块都是基于 ESM 编写的,天然具备按需引入的能力,但是样式必须全部引入137.2k
在main.ts全局引入样式
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
import 'vant/lib/index.css'; // 全局引入样式
createApp(App)
.use(router)
.use(store)
.use(ant)
.mount('#app')
移动端适配
安装postcss-pxtorem
npm install postcss-pxtorem -D
在根目录下创建postcss.config.js
module.exports = {"plugins": {"postcss-pxtorem": {rootValue: 37.5, // Vant 官方根字体大小是 37.5propList: ['*'],selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换}}
}
在根目录src中新建util目录下新建rem.ts等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 37.5
// 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem () {// 当前页面宽度相对于 375宽的缩放比例,可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。const scale = 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
安装
npm i -s axios
配置axios
在src创建utils文件夹,并在utils下创建request.ts
import axios from "axios";
const service = axios.create({baseURL,timeout: 5000 // request timeout
});
// 发起请求之前的拦截器
service.interceptors.request.use(config => {// 如果有token 就携带tokonconst token = window.localStorage.getItem("accessToken");if (token) {config.headers.common.Authorization = token;}return config;},error => Promise.reject(error)
);
// 响应拦截器
service.interceptors.response.use(response => {const res = response.data;if (response.status !== 200) {return Promise.reject(new Error(res.message || "Error"));} else {return res;}},error => {return Promise.reject(error);}
);
export default service;
使用
import request from "../utils/request";
request({url: "/profile ",method: "get"})
.then((res)=>{console.log(res)
})
配置请求代理
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';// https://vitejs.dev/config/
export default defineConfig({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对<script setup>
和<style vars>
的支持格外友好
正常写法
<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({setup() {const router = useRouter();const goLogin = () => {router.push("/");};return { goLogin };},
});
</script>
<script setup>
写法
<script lang="ts" setup="props">
import { useRouter } from "vue-router";
const router = useRouter();
const goLogin = () => {router.push("/");
};
</script>
是不是简洁了很多
<style vars>
如何用?
<script lang="ts" setup="props">
const state = reactive({color: "#ccc",
});
</script>
<style >
.text {color: v-bind("state.color");
}
</style>
就这么简单!
代码
原文地址:zhuanlan.zhihu.com/p/351888882
线上预览:http://123.56.85.24/vite/#/
代码地址:github.com/huoqingzhu/vue3-vite-ts-Vant
vitejs中文网:https://cn.vitejs.dev/
❤️爱心三连击
1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。
2.关注公众号程序员成长指北,回复「1」加入高级前端交流群!「在这里有好多 前端 开发者,会讨论 前端 Node 知识,互相学习」!
3.也可添加微信【ikoala520】,一起成长。“在看转发”是最大的支持
vite2.0+vue3移动端项目实战相关推荐
- Vite2.0搭建Vue3移动端项目
Vite2.0搭建Vue3移动端项目 一.搭建包含内容 vite版本.vue3.ts.集成路由.集成vuex.集成axios.配置Vant3.移动端适配.请求代理 二.步骤 vite+ts+vue3只 ...
- 网易云音乐移动端项目实战(分解上)
网易云音乐后台API服务搭建 步骤一 windows系统安装git //傻瓜式安装,可以一直next 步骤二 网易云音乐 NodeJS 版 API 下载好后,在vscode下新建一个文件夹 右击打开g ...
- 网易云音乐移动端项目实战(分解下)
网易云音乐移动端项目实战(分解下) 一.搜索页面与历史搜索记录 <template><div class="listviewTop"><div cla ...
- 网易云音乐移动端项目实战(分解中)
网易云音乐移动端项目实战(分解中) 一.底部全局播放控件制作 play-control.vue <template><div class="playcontrolor&qu ...
- Vue 2.0 真实点餐项目实战
1 常见的七种排序算法解析 作者简介: 耀升,一线互联网公司 Android 架构师,做过十余个项目,丰富的项目管理经验.热爱技术分享,活跃于 CSDN 和知乎. Chat 简介: 在面试中一问到排序 ...
- 优品购电商3.0微服务商城项目实战小结
优品购电商3.0分布式微服务项目由业务集群系统+后台管理系统构成,打通了微服务分布式开发及全栈开发技能,前后分离全栈开发.该项目是开发一个全品类的电商购物平台(B2C). 技术选型: 前端:Vue+服 ...
- 【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,接上一篇创建Vue2项目(下)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.创建vue2项目 二.移动端适配 1.安装插件flexible (适配移动端) 2.安装 postcss-pxto ...
- 实战 | Vite2.0搭建Vue3移动端项目
作者:清风皓月 zhuanlan.zhihu.com/p/351888882 一.涉及技术点 vite版本.vue3.ts.集成路由.集成vuex.集成axios.配置Vant3.移动端适配.请求代理 ...
- 小兔鲜儿Vue3.0前端电商项目实战
小兔鲜儿Vue3.0实现了电商平台主线业务功能,电商首页.一级分类.二级分类.商品详情.购物车.结算.支付.个人中心.订单管理.订单详情. 项目采用前后端分离模式,前台使用了VUE3.0技术栈构建,自 ...
最新文章
- [LeetCode]题解(python):108-Convert Sorted Array to Binary Search Tree
- 转载 http://blog.csdn.net/dengta_snowwhite/article/details/6418384
- 【Spring框架家族】Spring Cloud Eureka 之常用配置解析(转载)
- Harbor2.2.1配置(trivy扫描器、镜像签名)
- 内蒙古计算机专修学院单招,内蒙古电子信息职业技术学院单招多少分能上?
- 如何使用 ABAP 报表将 ABAP 服务器上的 SAP UI5 应用下载到本地
- Easytrader踩坑之旅(一)
- 使用Mybatis-plus更新null字段的解决方案
- MIDP应用程序的属性
- 建立一个端口为8189的服务器,它无限期等待直到有客户连接这个端口。若客户在网上发送正确的请求连接了这个端口,则服务器与客户之间就建立了一个可靠的连接。
- java axis2 jar_Java axis2.jar包详解及缺少jar包错误分析
- 防风网-挡风抑尘墙:挡风抑尘墙
- PHP_变量什么情况下加大括号{}
- SQL分页查询,SQL的LIMIT语句用法,SQL如何实现分页查询,SpringBoot实现分页查询。
- 幼儿园编程机器人课程介绍
- VirtualBox6.1安装及使用教程
- 微信小程序开发页面跳转教程
- HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程​
- 使用云服务器搭一个网站(1)
- centos 安装gstreamer_64位CentOS系统中安装32位开发库
热门文章
- 小程序数据请求的方式和注意事项
- C#将带声调的拼音转不带声调的拼音
- Zabbix-监控redis以及使用redis加速php项目
- python Dataframe 条件排序
- 跟着鬼哥学so改动,三,作业篇
- 瑞云效果图渲染价格实惠吗?
- 如何快速找到博客中关注的人
- C++开发报错之 “模块计算机类型x64与目标计算机x86类型冲突”
- APP常见启动报错:java.lang.SecurityException: Permission Denial: starting Intent
- 传国宝玺 第三部 巴山藏宝洞 第三十五章 释艮阵