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

一.涉及技术点

• vITe版本
• vue3
• ts
• 集成路由
• 集成vuex
• 集成axios
• 配置Vant3
• 移动端适配
• 请求代理

二.步骤

vite+ts+vue3只需要一行命令

配置路由

npm install vue-router@4 --save

在src下新建router目录，新建index.ts文件

import {
 createRouter, createWebHashHistory, RouteRecordRaw }
     From "vue-router";
    const routes: ArrayRouteRecordRaw>
 = [ {
 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()// 改变窗口大小时重新设置 remwindow.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项目实战内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vite+Electron快速构建VUE3桌面应用的实现
• 如何为老vue项目添加vite支持详解
• 基于Vite2.x的Vue 3.x项目的搭建实现
• 用vite搭建vue3应用的实现方法
• Vue3和Vite不得不说的那些事

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！