Detailed explanation of the practical application of vite2.0+vue3 mobile terminal 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: "front page",
  keepAlive: true
 },
 component: () => import("../views/Home/"),
 },
 {
 path: "/login",
 name: "Login",
 meta: {
  title: "Log in",
  keepAlive: true
 },
 component: () => import("../views/Login/"),
 },
];
const router = createRouter({
 history: createWebHashHistory(),
 routes
});
export default router;

import { createApp } from 'vue'
import App from './'
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){
  =value
 },
 addNum(state){
  =+10
 }
 },
 actions: {
 setData(context,value){
  ('setData',value)
 },
 },
 modules: {}
});

import { createApp } from 'vue'
import App from './'
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 './'
import router from "./router";
import store from "./store";
import 'vant/lib/'; // Global introduction of stylescreateApp(App)
.use(router)
.use(store)
.use(ant)
.mount('#app')

npm install postcss-pxtorem -D

 = {
 "plugins": {
 "postcss-pxtorem": {
  rootValue: 37.5, 
  // The official root font size of Vant is 37.5  propList: ['*'],
  selectorBlackList: ['.norem'] 
  // Filter out the class starting with .norem- and do not convert rem }
 }
}

// Rem etc. adapt to configuration file//Basic sizeconst baseSize = 37.5 
// Note that this value should be consistent with the rootValue in the file// Set the rem functionfunction setRem () {
 // The current page width is 375 in size and can be modified according to your needs. Generally, the design draft is 750 in width (you can get the design drawing and modify it). const scale =  / 375
 // Set the font size of the page root node ("(scale, 2)" means that the maximum magnification ratio is 2, which can be adjusted according to actual business needs)  = baseSize * (scale, 2) + 'px'
}
// InitializationsetRem()
// Reset rem when changing the window size = function () {
 ("I executed it")
 setRem()
}

import "./utils/rem"

npm i -s axios

import axios from "axios";
const service = ({
 baseURL,
 timeout: 5000 // request timeout
});
// Interceptor before initiating a request(
 config => {
 // If there is a token, carry a tokon const token = ("accessToken");
 if (token) {
   = token;
 }
 return config;
 },
 error => (error)
);
// Response Interceptor(
 response => {
 const res = ;
 
 if ( !== 200) {
  return (new Error( || "Error"));
 } else {
  return res;
 }
 },
 error => {
 return (error);
 }
);
export default service;

import request from "../utils/request";
request({url: "/profile ",method: "get"})
.then((res)=>{
 (res)
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
 
// /config/
export default defineConfig({
 plugins: [vue()],
 base:"./",//Package path resolve: {
 alias:{
  '@': (__dirname, './src')//Set an 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 = () => {
  ("/");
 };
 return { goLogin };
 },
});
</script>
<script setup>How to write
<script lang="ts" setup="props">
import { useRouter } from "vue-router";
const router = useRouter();
const goLogin = () => {
 ("/");
};
</script>

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