csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

$ npm i

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// @ts-ignore
import { resolve } from "path";
// @ts-ignore
import Components from "unplugin-vue-components/vite";
// @ts-ignore
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
  // 打包相对路径
  base: './',
  server: {
    host: true,
    proxy: {
      "^/cloudApi/": {
        target: "https://yongma16.xyz/back-front/",
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace(/^\/cloudApi/, ""),
      },
    },
  },
  "css": {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        patterns: [resolve(__dirname, "./src/style/main.less")],
      },
    },
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
});

run = "npm i && npm run dev"
[deployment]
build = "npm i && npm run build"
run = "npm run preview"
[env]
PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
XDG_CONFIG_HOME = "/root/.config"
npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"

<script setup lang="ts">
import { ref } from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
const locale = ref(zhCN);
</script>
<template>
  <!--  国际化配置-->
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-config-provider>
</template>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
  #app{
    width: 100vw;
    height: 100vh;
  }
</style>

// initial state
import { loginUser } from "../../service/user/userApi";
import { message } from "ant-design-vue";
const state = () => ({
  userInfo: {},
});
// getters
const getters = {
  // @ts-ignore
  userInfo: (state, getters, rootState) => {
    const userInfoPermission =
      window.localStorage.getItem("userInfoPermission");
    const userInfo = userInfoPermission ? JSON.parse(userInfoPermission) : {};
    return state.userInfo || userInfo;
  },
};
// actions
// @ts-ignore
const actions = {
  // @ts-ignore
  setUserInfoAction({ commit, state }, userInfo) {
    commit("setUserInfo", userInfo);
  },
  // @ts-ignore
  getUserInfoAction({ state }) {
    const userInfoPermission =
      window.localStorage.getItem("userInfoPermission");
    const userInfo = userInfoPermission ? JSON.parse(userInfoPermission) : {};
    return state.userInfo || userInfo;
  },
  // @ts-ignore
  async loginUser({ commit, state }, params):Promise<void>  {
    return new Promise(async (resolve: any, reject: any) => {
      try {
        console.log('params________',params)
        const res:any = await loginUser(params);
        console.log("res ____________", res);
        const data=res?.data
        console.log('data',data)
        if (data?.code === 200) {
          const userInfo = data.data;
          commit("setUserInfo", userInfo);
          window.localStorage.setItem(
            "userInfoPermission",
            JSON.stringify(userInfo)
          );
          message.success(data?.message);
        } else {
          message.warning(data?.message);
        }
        resolve({ data});
      } catch (r: any) {
        console.log('r',r)
        message.error(JSON.stringify(r));
        reject(r);
      }
    });
  },
};
// mutations
const mutations = {
  // @ts-ignore
  setUserInfo(state, userInfo) {
    console.log("set info", userInfo);
    window.localStorage.setItem("userInfoPermission", JSON.stringify(userInfo));
    state.userInfo = userInfo;
  },
};
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

import { createStore, createLogger } from "vuex";
import user from "./modules/user";
const debug = process.env.NODE_ENV !== "production";
export default createStore({
  modules: {
    user,
  },
  strict: debug,
  plugins: debug ? [createLogger()] : [],
});

// import { useStore } from "vuex";
import * as VueRouter from "vue-router";
import store from "../store/index.js";
/**
 * 基础路由
 * @type { *[] }
 */
const constantRouterMap: any = [
  {
    path: "/",
    name: "dashboard",
    // @ts-ignore
    component: () => import("@/view/layout/Layout.vue"),
    meta: { title: "首页" },
  },
  {
    path: "/login",
    name: "login",
    // @ts-ignore
    component: () => import("@/view/user/Login.vue"),
    meta: { title: "登录" },
  },
  {
    path: "/register",
    name: "register",
    // @ts-ignore
    component: () => import("@/view/user/Register.vue"),
    meta: { title: "注册" },
  },
];
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router: any = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes: constantRouterMap,
});
// 路由权限  beforeResolve
router.beforeResolve(async (to: any, from: any, next: any) => {
  // 登录
  if (to.name === "login" || to.name === "register") {
    console.warn("login|register");
    next();
  }
  // 用户信息
  const userInfoPermission: any =
    window.localStorage.getItem("userInfoPermission");
  const params = userInfoPermission ? JSON.parse(userInfoPermission) : {};
  if (params) {
    console.log("store", store);
    console.log("params", params);
    try{
      const {data}=await store.dispatch("user/loginUser", params);
      if (data?.code===200) {
        next();
      }
    }
    catch(r){
      console.log('r',r)
      return next({ name: "login" });
    }
  }
  // 返回登录
  return next({ name: "login" });
});
export default router;

npm i && npm run dev