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 element实现表格合并行数据
Nov 30 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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同步的实现方法
2009/10/21 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php-app开发接口加密详解
2018/04/18 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python实现操作文件(文件夹)
2019/10/31 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
Flask处理Web表单的实现方法
2021/01/31 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
九寨沟导游词
2015/02/02 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
黄河绝恋观后感
2015/06/08 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript