极乐门资源网

vite2.0+vue3移动端项目实战详解
网络编程 2024/11/15 佚名
2 0
极乐门资源网 Design By www.ioogu.com

一.涉及技术点

  • 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
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“vite2.0+vue3移动端项目实战详解”

暂无vite2.0+vue3移动端项目实战详解的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com