vue3使用vite2移动端项目

刺骨的言语ヽ痛彻心扉 2022-10-09 14:29 252阅读 0赞

用了vue3大半年了，一直都是用vue cli 基于webpack来搭建的项目，刚好有个移动端的项目，我想用vite版本的vue3来做，这里记录一下项目搭建的过程。

[Home | Vitecn.vitejs.dev][Home _ Vite_cn.vitejs.dev]

## 一.目标 ##

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

## 二.步骤 ##

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

npm init @vitejs/app my-vue-app --template vue-ts

### 配置路由 ###

[Introduction | Vue Routernext.router.vuejs.org][Introduction _ Vue Router_next.router.vuejs.org]

安装路由(4.x)[Introduction | Vue Router][Introduction _ Vue Router_next.router.vuejs.org]安装路由(4.x)

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） ###

[What is Vuex? | Vuexnext.vuex.vuejs.org![图标][v2-983ea11f68f23d6a3229e13eafea6dc7_180x120.jpg]][What is Vuex_ _ Vuex_next.vuex.vuejs.org_v2-983ea11f68f23d6a3229e13eafea6dc7_180x120.jpg]

*  安装

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 ###

[What is Vuex? | Vuexnext.vuex.vuejs.org![图标][v2-983ea11f68f23d6a3229e13eafea6dc7_180x120.jpg]][What is Vuex_ _ Vuex_next.vuex.vuejs.org_v2-983ea11f68f23d6a3229e13eafea6dc7_180x120.jpg]

安装

npm i vant@next -S

vite版本不需要配置组件的按需加载，因为Vant 3.0 内部所有组件模块都是基于 ESM 编写的，天然具备按需引入的能力,样式的按需引入在vite.config.ts配置

组件尽量在局部引用，如果放在全局会增加入口文件的大小，影响首屏加载速度。

在vite.config.t配置样式按需引入

//npm i vite-plugin-imp -D import vitePluginImp from 'vite-plugin-imp'
      plugins: [
        vue(), 
        vitePluginImp({ 
          libList: [
            { 
              libName: 'vant',
              style(name) { 
                if (/CompWithoutStyleFile/i.test(name)) { 
                  // This will not import any style file               return false
                }
                return `vant/es/${ name}/index.css`
              }
            },   
          ]
        })
      ],

### 移动端适配 ###

安装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 ###

[axios中文网|axios API 中文文档www.axios-js.com][axios_axios API _www.axios-js.com]

安装

npm i -s axios

配置axios

在src创建utils文件夹,并在utils下创建request.ts

import axios from "axios";
 let baseURL = "/api";
 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>的支持格外友好 ##

正常写法

是不是简介了很多

就这么简单！

### 以上代码打包后总大小143KB ###

### 入口文件大小:53KB ###

代码地址

[https://github.com/huoqingzhu/vue3-vite-ts-Vant][https_github.com_huoqingzhu_vue3-vite-ts-Vant]

线上预览

[Vite App][]

基于vite2的vue3后台管理架子

[huoqingzhu/Admin-pro][huoqingzhu_Admin-pro]

转载：https://zhuanlan.zhihu.com/p/351888882

[Home _ Vite_cn.vitejs.dev]: https://link.zhihu.com/?target=https%3A//cn.vitejs.dev/
[Introduction _ Vue Router_next.router.vuejs.org]: https://link.zhihu.com/?target=https%3A//next.router.vuejs.org/introduction.html
[v2-983ea11f68f23d6a3229e13eafea6dc7_180x120.jpg]: https://pic4.zhimg.com/v2-983ea11f68f23d6a3229e13eafea6dc7_180x120.jpg
[What is Vuex_ _ Vuex_next.vuex.vuejs.org_v2-983ea11f68f23d6a3229e13eafea6dc7_180x120.jpg]: https://link.zhihu.com/?target=https%3A//next.vuex.vuejs.org/
[axios_axios API _www.axios-js.com]: https://link.zhihu.com/?target=http%3A//www.axios-js.com/
[https_github.com_huoqingzhu_vue3-vite-ts-Vant]: https://link.zhihu.com/?target=https%3A//github.com/huoqingzhu/vue3-vite-ts-Vant
[Vite App]: https://link.zhihu.com/?target=http%3A//xiaohuo.online/vite
[huoqingzhu_Admin-pro]: https://link.zhihu.com/?target=https%3A//github.com/huoqingzhu/Admin-pro