怎么在移动端项目中使用vite2.0和vue3

怎么在移动端项目中使用vite2.0和vue3？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

vue是什么软件

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

一.涉及技术点

• 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

在class="lazy" data-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

配置

在class="lazy" data-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转换 } }}

在根目录class="lazy" data-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()// 改变窗口大小时重新设置 remwindow.onresize = function () { console.log("我执行了") setRem()}

在mian.ts引入

import "./utils/rem"

配置网络请求axios

安装

npm i -s axios

配置axios

在class="lazy" data-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, './class="lazy" data-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>

看完上述内容，你们掌握怎么在移动端项目中使用vite2.0和vue3的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读！