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

yma162023-07-24 14:34

文章目录

    • ⭐前言
    • ⭐利用inscode免费开放资源
      • [💖 在inscode搭建vue3+ts+ant项目](#💖 在inscode搭建vue3+ts+ant项目)
      • [💖 调整配置](#💖 调整配置)
      • [💖 antd 国际化配置](#💖 antd 国际化配置)
      • [💖 用户store](#💖 用户store)
      • [💖 路由权限](#💖 路由权限)
      • [💖 预览](#💖 预览)
    • ⭐结束

⭐前言

大家好，我是yma16，本文分享利用inscode搭建vue3(ts)+antd前端模板。

2023 新星计划 vue(ts)+antd赛道报名入口：https://bbs.csdn.net/topics/616574177

搭建vue3+ts+antd的指引：认识vite_vue3 初始化项目到打包

⭐利用inscode免费开放资源

InsCode 是一个一站式的软件开发服务平台，从开发-部署-运维-运营，都可以在 InsCode 轻松完成。 InsCode

为每位开发者提供了免费的 2 核/4 GB 云端开发环境。

InsCode 的 Cloud IDE

是运行于浏览器的集成开发环境（IDE），开发者只需要浏览器，有网络环境，就可以随时随地写代码，不用下载安装，不受硬件、环境的影响。

InsCode 的 Cloud IDE 底层基于 VSCode 开发，使用体验与桌面版 VS Code

几乎一致，提供了高效的文件搜索、Git 版本控制、Debug 调试、数据库、终端、在线预览等功能。

重点

InsCode 可以一键部署开发的应用，或者直接部署 GitHub 应用。部署后提供独立的域名访问，并永久在线。

💖 在inscode搭建vue3+ts+ant项目

在git仓库拿到https链接(选择我之前搭建的vue3+ts+antd的git仓库导入)

导入inscode作为模板

导入成功！

安装依赖

bash 复制代码 
$ npm i

💖 调整配置

vite.config.js

javascript 复制代码 
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()],
    }),
  ],
});

.inscode配置

bash 复制代码 
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"

💖 antd 国际化配置

app.ts

bash 复制代码 
<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>

💖 用户store

user.ts

bash 复制代码 
// 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,
};

index.ts

bash 复制代码 
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()] : [],
});

💖 路由权限

router/index.ts

bash 复制代码 
// 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;

💖 预览

运行指令

bash 复制代码 
npm i && npm run dev

运行成功截图：

inscode资源如下：

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

👍 点赞，是我创作的动力！

⭐️ 收藏，是我努力的方向！

✏️ 评论，是我进步的财富！

💖 感谢你的阅读！

相关推荐
guokanglun5 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan36 分钟前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记42 分钟前
前端：HTML （学习笔记）【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
风尚云网2 小时前
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解（一）
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析：快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能，觊觎（Edge）浏览器的内置截（长）图功能
前端·edge
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作