npm init vite@latest

npm install element-plus -S

import { createApp } from 'vue'
import App from './App.vue'
// 引入element-plus包
import ElementPlus from 'element-plus';
// 引入對應(yīng)的樣式
import 'element-plus/theme-chalk/index.css';

const app = createApp(App);
app
.use(ElementPlus)
.mount('#app')

npm install vuex -S

cd ./src
mkdir store
cd ./store
touch index.js
mkdir ./module
cd ./module
touch moduleA.js

// index.js文件
import {createStore} from "vuex";

import {moduleA} from "./module/moduleA";

export const store = createStore({
? ? // Vuex允許將store分割成模塊（module），每個模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊
? ? // 訪問moduleA的狀態(tài)：store.state.moduleA
? ? modules: {
? ? ? ? moduleA
? ? }
});

// module/moduleA.js文件
// 對于模塊內(nèi)部的mutation和getter，接收的第一個參數(shù)是模塊的局部狀態(tài)對象
// 對于模塊內(nèi)部的action，局部狀態(tài)通過context.state暴露出來，根節(jié)點狀態(tài)則為context.rootState
// 對于模塊內(nèi)部的getter，根節(jié)點狀態(tài)會作為第三個參數(shù)暴露出來

// 在帶命名空間的模塊內(nèi)訪問全局內(nèi)容
// 如果希望使用全局state和getter，rootState和rootGetters會作為第三和第四個參數(shù)傳入getter，也會通過context對象的屬性傳入action
// 若需要在全局命名空間內(nèi)分發(fā)action或提交mutation，將{root: true}作為第三個參數(shù)傳給dispatch或commit即可。

export const moduleA = {
? ? // 默認情況下，模塊內(nèi)部的action、mutation和getter是注冊在全局命名空間的，如果希望模塊具有更高的封裝度和復用性，可以通過添加namespaced:true的方式使其成為帶命名空間的模塊
? ? namespaced: true,
? ? state: {
? ? ? ? testState1: 'xxxx',
? ? ? ? testState2: {
? ? ? ? ? ? a: 0,
? ? ? ? ? ? b: 1
? ? ? ? },
? ? ? ? testState3: 0
? ? },
? ? // 有的時候需要從store中的state中派生出一些狀態(tài)，此時可以將該部分抽象出一個函數(shù)供多處使用。
? ? // Vuex允許在store中定義getter，像計算屬性一樣，getter的返回值會根據(jù)它的依賴被緩存起來，且只有當他的依賴值發(fā)生了改變才會被重新計算
? ? getters: {
? ? ? ? // getter接收state作為其第一個參數(shù)
? ? ? ? testGetter1: state => {
? ? ? ? ? ? return state.testState1 + state.testState3;
? ? ? ? },
? ? ? ? // getter可以接受其他getter作為第二個參數(shù)
? ? ? ? testGetter2: (state, getters) => {
? ? ? ? ? ? return getters.testGetter1.length;
? ? ? ? }
? ? },
? ? // 更改Vuex的store中的狀態(tài)的唯一方法是提交mutation，每個mutation都有一個字符串的事件類型和一個回調(diào)函數(shù)，該回調(diào)函數(shù)接收state作為第一個參數(shù)，提交的載荷作為第二個參數(shù)
? ? // 以相應(yīng)的type調(diào)用store.commit方法來觸發(fā)相應(yīng)的回調(diào)函數(shù)
? ? // Mutation必須是同步函數(shù)
? ? mutations: {
? ? ? ? testMutation1(state) {
? ? ? ? ? ? // 變更狀態(tài)
? ? ? ? ? ? state.testState3++;
? ? ? ? },
? ? ? ? // 第二個參數(shù)是載荷
? ? ? ? testMutation2(state, payload) {
? ? ? ? ? ? state.testState1 += payload.content;
? ? ? ? }
? ? },
? ? // Action提交的是mutation，而不是直接變更狀態(tài)
? ? // Action可以包含任意異步操作
? ? // Action函數(shù)接受一個與store實例具有相同方法和屬性的context對象，因此可以調(diào)用context.commit提交一個mutation，或者通過context.state和context.getters來獲取state和getters。
? ? // Action通過store.dispatch方法觸發(fā)
? ? actions: {
? ? ? ? testAction1(context) {
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? context.commit('testMutation1');
? ? ? ? ? ? }, 1000);
? ? ? ? },
? ? ? ? testAction2({commit}, payload) {
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? commit({
? ? ? ? ? ? ? ? ? ? type: 'testMutation2',
? ? ? ? ? ? ? ? ? ? content: payload.content
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }, 1000);
? ? ? ? }
? ? }
};

// ……
import {store} from './store';

const app = createApp(App);
app
.use(store)
.use(ElementPlus)
.mount('#app')

npm install vue-router@4 -S

cd ./src
mkdir router
cd ./router
touch index.js

import {createRouter, createWebHashHistory} from 'vue-router';

const routes = [
? ? {
? ? ? ? path: '/',
? ? ? ? redirect: '/component1'
? ? },
? ? {
? ? ? ? path: '/component1',
? ? ? ? name: 'component1',
? ? ? ? component: () => import('../components/Component1.vue')
? ? },
? ? {
? ? ? ? path: '/component2',
? ? ? ? name: 'component2',
? ? ? ? component: () => import('../components/Component2.vue')
? ? }
];

const router = createRouter({
? ? history: createWebHashHistory(),
? ? routes
});

export default router;

// ……
import router from './router';

const app = createApp(App);
app
.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')

<script setup>
</script>

<template>
? <router-view></router-view>
</template>

npm install axios -S

// /src/utils/request.js
import axios from 'axios';

const service = axios.create({
? ? baseURL: '/api',
? ? timeout: 9999
});

// 請求攔截器
service.interceptors.request.use(
? ? config => {
? ? ? ? // 做一些請求前的處理，例如添加一些頭信息、token信息等
? ? ? ? return config;
? ? },
? ? error => {
? ? ? ? return error;
? ? }
);

// 響應(yīng)攔截器
service.interceptors.response.use(
? ? response => {
? ? ? ? // 根據(jù)響應(yīng)做一些處理，例如將響應(yīng)信息存儲到store中等
? ? },
? ? error => {
? ? ? ? return error;
? ? }
);

export default service;

import service from "../utils/request";

export const testPost = data => {
? ? return service({
? ? ? ? url: '/base',
? ? ? ? method: 'post',
? ? ? ? data
? ? });
};