Detailed explanation of vite2.0+vue3 mobile project

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

npm install vue-router@4 --save

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
 {
 path: "/",
 name: "Home",
 meta: {
  title: "Home",
  keepAlive: true
 },
 component: () => import("../views/Home/index.vue"),
 },
 {
 path: "/login",
 name: "Login",
 meta: {
  title: "Login",
  keepAlive: true
 },
 component: () => import("../views/Login/index.vue"),
 },
];
const router = createRouter({
 history: createWebHashHistory(),
 routes
});
export default router;

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"; createApp(App)
.use(router)
.mount('#app')

npm i vuex@next --save

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: {}
});

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')

npm i vant@next -S

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
import 'vant/lib/index.css'; // Global import style createApp(App)
.use(router)
.use(store)
.use(ant)
.mount('#app')

npm install postcss-pxtorem -D

module.exports = {
 "plugins": {
 "postcss-pxtorem": {
  rootValue: 37.5, 
  // Vant official root font size is 37.5
  propList: ['*'],
  selectorBlackList: ['.norem'] 
  // Filter out classes starting with .norem- and do not perform rem conversion}
 }
}

// rem proportional adaptation configuration file // Base size const baseSize = 37.5 
// Note that this value should be consistent with the rootValue in the postcss.config.js file // Set rem function function setRem () {
 // The current page width is relative to the 375 width scaling ratio, which can be modified according to your needs. Generally, the design draft is 750 width (you can get the design drawing and modify it for convenience).
 const scale = document.documentElement.clientWidth / 375
 // Set the font size of the root node of the page ("Math.min(scale, 2)" means the maximum magnification ratio is 2, which can be adjusted according to actual business needs)
 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// Initialize setRem()
// Reset rem when changing window size
window.onresize = function () {
 console.log("I executed")
 setRem()
}

import "./utils/rem"

npm i -s axios

import axios from "axios";
const service = axios.create({
 baseURL,
 timeout: 5000 // request timeout
});
//Interceptor before initiating the request service.interceptors.request.use(
 config => {
 // If there is a token, carry token
 const token = window.localStorage.getItem("accessToken");
 if (token) {
  config.headers.common.Authorization = token;
 }
 return config;
 },
 error => Promise.reject(error)
);
// Response interceptor 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)
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
 
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 base:"./",//Packaging path resolve: {
 alias:{
  '@': path.resolve(__dirname, './src') //Set alias}
 },
 server: {
 port:4000, //Start port open: true,
 proxy: {
  // Option writing '/api': 'http://123.56.85.24:5000'//Proxy URL},
 cors:true
 }
 
})

<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>Writing <script lang="ts" setup="props">
import { useRouter } from "vue-router";
const router = useRouter();
const goLogin = () => {
 router.push("/");
};
</script>

How to use <style vars>?
<script lang="ts" setup="props">
const state = reactive({
 color: "#ccc",
});
</script>
<style>
.text {
 color: v-bind("state.color");
}
</style>