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


Posted in Vue.js onMarch 03, 2021

一.涉及技术点

  • 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.5
  propList: ['*'],
  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 就携带tokon
 const 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/

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

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
详解Angular操作cookies方法
2018/06/01 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python提取页面内url列表的方法
2015/05/25 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
职业规划书如何设计?
2014/01/09 职场文书
医药销售自我评价200字
2014/09/11 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
院系推荐意见
2015/06/05 职场文书
生活小常识广播稿
2015/08/19 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫