Detaillierte Erläuterung des mobilen Projekts vite2.0 + vue3

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

npm installiere vue-router@4 --save

importiere { createRouter, createWebHashHistory, RouteRecordRaw } von „vue-router“;
const routes: Array<RouteRecordRaw> = [
 {
 Weg: "/",
 Name: "Home",
 Meta: {
  Titel: "Zuhause",
  keepAlive: wahr
 },
 Komponente: () => import("../views/Home/index.vue"),
 },
 {
 Pfad: "/login",
 Name: "Login",
 Meta: {
  Titel: "Anmelden",
  keepAlive: wahr
 },
 Komponente: () => import("../views/Login/index.vue"),
 },
];
const router = createRouter({
 Verlauf: createWebHashHistory(),
 Routen
});
Standardrouter exportieren;

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus "./router" importieren; createApp(App)
.use(Router)
.mount('#app')

npm ich vuex@next --speichern

importiere { createStore } von "vuex";
exportiere Standard createStore({
 Zustand: {
 listData:{1:10},
 Zahl: 10
 },
 Mutationen:
 setData(Status,Wert){
  state.listData=Wert
 },
 addNum(Zustand){
  Zustand.Nummer = Zustand.Nummer + 10
 }
 },
 Aktionen: {
 setData(Kontext,Wert){
  Kontext.commit('setData',Wert)
 },
 },
 Module: {}
});

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus "./router" importieren;
Store aus "./store" importieren;
createApp(App)
.use(Router)
.use(speichern)
.mount('#app')

npm ich vant@next -S

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus "./router" importieren;
Store aus "./store" importieren;
importiere 'vant/lib/index.css'; // Globaler Importstil createApp(App)
.use(Router)
.use(speichern)
.use(Ameise)
.mount('#app')

npm installiere postcss-pxtorem -D

modul.exporte = {
 "Plugins": {
 "postcss-pxtorem": {
  Wurzelwert: 37,5, 
  // Die offizielle Schriftgröße von Vant beträgt 37,5
  Eigenschaftenliste: ['*'],
  SelektorBlackList: ['.norem'] 
  // Klassen herausfiltern, die mit .norem- beginnen, und keine Rem-Konvertierung durchführen}
 }
}

// rem proportionale Anpassungskonfigurationsdatei // Basisgröße const baseSize = 37.5 
// Beachten Sie, dass dieser Wert mit dem rootValue in der Datei postcss.config.js übereinstimmen muss // Setze die Rem-Funktion function setRem () {
 // Die aktuelle Seitenbreite entspricht dem Breitenskalierungsverhältnis von 375 und kann nach Bedarf geändert werden. Im Allgemeinen ist der Entwurf 750 breit (Sie können die Entwurfszeichnung abrufen und sie nach Belieben ändern).
 const scale = document.documentElement.clientWidth / 375
 // Legen Sie die Schriftgröße des Stammknotens der Seite fest („Math.min (Scale, 2)“ bedeutet, dass das maximale Vergrößerungsverhältnis 2 beträgt und entsprechend den tatsächlichen Geschäftsanforderungen angepasst werden kann.)
 document.documentElement.style.fontSize = Basisgröße * Math.min(Skala, 2) + 'px'
}
// setRem() initialisieren
//Reset rem beim Ändern der Fenstergröße
Fenster.onresize = Funktion () {
 console.log("Ich habe ausgeführt")
 setRem()
}

importiere "./utils/rem"

npm i -s axios

importiere Axios von „Axios“;
const service = axios.create({
 Basis-URL,
 Timeout: 5000 // Anforderungs-Timeout
});
//Interceptor vor dem Einleiten der Anfrage service.interceptors.request.use(
 Konfiguration => {
 // Wenn ein Token vorhanden ist, Carry-Token
 const token = window.localStorage.getItem("accessToken");
 wenn (Token) {
  config.headers.common.Authorization = Token;
 }
 Konfiguration zurückgeben;
 },
 Fehler => Promise.reject(Fehler)
);
// Antwort-Interceptor service.interceptors.response.use(
 Antwort => {
 const res = Antwort.Daten;
 
 wenn (Antwort.Status !== 200) {
  returniere Promise.reject(neuer Fehler(res.message || "Fehler"));
 } anders {
  Rückgabewert;
 }
 },
 Fehler => {
 returniere Promise.reject(Fehler);
 }
);
Standarddienst exportieren;

Importiere die Anfrage aus "../utils/request";
Anfrage({URL: "/Profil ",Methode: "get"})
.dann((res)=>{
 Konsole.log(res)
})

importiere { defineConfig } von 'vite'
vue aus '@vitejs/plugin-vue' importieren
Pfad von „Pfad“ importieren;
 
// https://vitejs.dev/config/
exportiere Standard-DefineConfig({
 Plugins: [vue()],
 base:"./",//Verpackungspfad auflösen: {
 alias:{
  '@': Pfad.resolve(__dirname, './src') //Alias ​​festlegen}
 },
 Server: {
 port:4000, //Port öffnen: true,
 Proxy: {
  //Option zum Schreiben von '/api': 'http://123.56.85.24:5000'//Proxy-URL},
 Kors: wahr
 }
 
})

<script lang="ts">
importiere { defineComponent } von "vue";
importiere { useRouter } von "vue-router";
exportiere StandarddefiniereKomponente({
 aufstellen() {
 const router = useRouter();
 const goLogin = () => {
  router.push("/");
 };
 zurückgeben { goLogin };
 },
});
</Skript>
<script setup>Schreiben <script lang="ts" setup="props">
importiere { useRouter } von "vue-router";
const router = useRouter();
const goLogin = () => {
 router.push("/");
};
</Skript>

Wie verwende ich <style vars>?
<script lang="ts" setup="props">
const state = reaktiv({
 Farbe: "#ccc",
});
</Skript>
<Stil>
.text {
 Farbe: v-bind("Status.Farbe");
}
</Stil>