看了很多文章，基本都是要东拼西凑的，很多项目其实用到的就是路由(router)、状态管理配置(store)、网络请求(axios)，再来一个自己想要的ui框架，我用的是element-plus，然后整个项目的基础架构就完了。后面的世界还很大，慢慢学习。
ps:安装npm啥的基础就不讲了

一、创建

1、创建一个基于vite的项目注意kertag为创建的项目名，自行更改

npm create vite@latest kertag -- --template vue

2、进入项目目录

cd kertag

3、安装依赖文件

npm install

二、初始化项目

1、进入src目录

cd src

2、创建基础目录 路由(router)、状态管理配置(store)、请求(axios) 、页面(views) 、配置文件(config)

mkdir router store axios views
cd ..
ps:cd ..用于返回上层目录，也就是项目根目录

3、修改App.vue

App.vue

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

<script setup></script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

三、路由配置

1.安装

npm install vue-router

2.在router目录下创建index.js文件并写入如下代码

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

const routes = [
    {
        path: "/",
        name: "home",
        title: "首页",
        component: () => import("../views/index.vue")
    },
];

//可以在这里输入更多的配置
const router = createRouter({
    //内部提供了history模式的实现，为了简单起见，我们这里使用hash模式
    history: createWebHashHistory(),
    routes, //`routes:routes`的缩写
});

export default router;

3.在views目录下创建index.vue文件并写入如下代码

<template>
    <button @click="countAdd">Count is: {{ count }}</button>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import store from "@/store";

const state = reactive({
    count: store.state.count,
});

const { count } = toRefs(state);

const countAdd = () => {
    // 获取存储的count以及给值加1
    store.commit("set", ["count", store.state.count + 1]);
    // 修改页面count显示的值为新存储的值
    state.count = store.state.count;
}

</script>

<style scoped>
button {
    font-weight: bold;
}
</style>

四、状态管理配置

1.安装vuex

npm install vuex@next --save

2.在store目录下创建index.js和local.js文件，
index.js写入如下代码

import { createStore } from "vuex";
import { local } from "./local";

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
            count: local.get("count") || 0,
            token: local.get("token") || null,
            username: local.get("username") || "admin",
        };
    },
    mutations: {
        set(state, data) {
            state[data[0]] = data[1];
            local.set(data[0], data[1]);
        },
        del(state, name) {
            if (state[name]) {
                local.remove(name);
            }
        },
    },
});
export default store;

loacl.js文件中写入如下代码

export class local {
    static get(key) {
        const val = window.localStorage.getItem(key);
        if (val == "undefined") {
            return null;
        } else {
            return JSON.parse(val);
        }
    }
    static set(key, value) {
        window.localStorage.setItem(key, JSON.stringify(value));
    }
    static remove(key) {
        window.localStorage.removeItem(key);
    }
}

五、env和vite.config配置

1.在项目目录下创建.env文件

// 请求接口域名
VITE_ADMIN_API = 'https://www.kertag.cn/'

2.修改项目目录下vite.config.js为以下代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig(({ mode }) => {
  return {
    base: "/",
    plugins: [vue()],
    server: {
      open: true,
    },
    //解决打包过大
    build: {
      chunkSizeWarningLimit: 1000,
      rollupOptions: {
        output: {
          // 分包
          manualChunks(id) {
            if (id.includes("node_modules")) {
              return id
                .toString()
                .split("node_modules/")[1]
                .split("/")[0]
                .toString();
            }
          },
        },
      },
    },
    // 配置别名
    resolve: {
      alias: [
        {
          find: "@", //指向的是src目录
          replacement: resolve(__dirname, "src"),
        },
      ],
    },
  };
});

六、axios配置

1.安装

npm i axios

2.在axios目录下创建index.js、api.js

index.js

import axios from "axios";
import { ElLoading, ElMessage } from "element-plus";
//创建axios的一个实例
var instance = axios.create({
    baseURL: import.meta.env.VITE_ADMIN_API, //接口统一域名
    timeout: 6000, //设置超时
    headers: {
        "Content-Type": "application/json;charset=UTF-8;",
    },
});

//请求拦截器
instance.interceptors.request.use(
    (config) => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = window.localStorage.getItem("token");
        token && (config.headers.Authorization = token);
        //若请求方式为post，则将data参数转为JSON字符串
        if (config.method === "POST") {
            config.data = JSON.stringify(config.data);
        }
        return config;
    },
    (error) =>
        // 对请求错误做些什么
        Promise.reject(error)
);

//响应拦截器
instance.interceptors.response.use(
    (response) => {
        //响应成功
        return response.data;
    },
    (error) => {
        console.log(error);
        //响应错误
        if (error.response && error.response.code) {
            const code = error.response.code;
            switch (code) {
                case 201:
                    message = "没有权限";
                    break;
                default:
                    message = "请求失败";
            }
            ElMessage.error(message);
            return Promise.reject(error);
        }
        return Promise.reject(error);
    }
);

export default instance;

api.js

import axios from "@/axios/index";

// 封装全局get
export const get = (url, params = {}) => {
    return axios({
        url: url,
        method: "get",
        params,
    });
};

// 封装全局post
export const post = (url, data = {}) => {
    return axios({
        url: url,
        method: "post",
        data,
    });
};

七、引入element-plus和element-plus的图标库

1.安装

npm install element-plus --save
npm install @element-plus/icons-vue

最终的main.js文件内容如下

import { createApp } from "vue";
import App from "@/App.vue";
// 引入路由
import router from "@/router/index";
// 引入存储(状态管理)
import store from "@/store/index";
// 引入element-plus
import ElementPlus from "element-plus";
// 引入element-plus中文
import locale from "element-plus/lib/locale/lang/zh-cn";
// 引入element-plus样式
import "element-plus/dist/index.css";
// 引入element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 引入GET和POST方法
import { get, post } from "@/axios/api";
// 创建
const app = createApp(App);
// 全局GET变量
app.config.globalProperties.$get = get;
// 全局POST变量
app.config.globalProperties.$post = post;
// 循环element图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}
app.use(store).use(router).use(ElementPlus, { locale });
app.mount("#app");

最后不要忘记 npm run dev 运行一下看看效果