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中如何添加百度统计代码
Dec 19 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
Vue Mint UI mt-swipe的使用方式
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
B2K与车机的中波PK
2021/03/02 无线电
php函数实现判断是否移动端访问
2015/03/03 PHP
ThinkPHP模型详解
2015/07/27 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
Javascript缓存API
2016/06/14 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python pandas修改列属性的方法详解
2018/06/09 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
销售自荐信
2013/10/22 职场文书
门卫工作岗位职责
2013/12/17 职场文书
学校门卫岗位职责
2014/03/16 职场文书
社区平安建设方案
2014/05/25 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
美丽人生观后感
2015/06/03 职场文书
Python开发五子棋小游戏
2022/04/28 Python