实战 | Vite2.0搭建Vue3移动端项目

Myth丶恋晨 2022-11-15 05:54 193阅读 0赞

![4d70df78f72a70681ef271e5326ef05f.gif][]

作者：清风皓月

zhuanlan.zhihu.com/p/351888882

### 一.涉及技术点 ###

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 setup>`写法 ####

> 是不是简洁了很多

### `<style vars>`如何用？ ###

就这么简单！

### 代码 ###

*  原文地址：zhuanlan.zhihu.com/p/351888882
 *  线上预览：http://123.56.85.24/vite/\#/  
    
 *  代码地址：github.com/huoqingzhu/vue3-vite-ts-Vant  
    
 *  vitejs中文网:https://cn.vitejs.dev/

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![bdde5c470a676b83c80bd59af392c281.png][]

点个**在看**支持我吧

![291d2bcd93603328900cbf984d6521e3.gif][]

[4d70df78f72a70681ef271e5326ef05f.gif]: /images/20221022/769fa1fd69524d0e88b99bd984d0984e.png
[bdde5c470a676b83c80bd59af392c281.png]: /images/20221022/1abd96993acd422f86e63f5148139c0c.png
[291d2bcd93603328900cbf984d6521e3.gif]: /images/20221022/8b8b29e52aa0483ea64c78b753ef261d.png