?前言
大家好，我是yma16，本文分享利用inscode搭建vue3(ts)+antd前端模板。
2023 新星計(jì)劃 vue(ts)+antd賽道報(bào)名入口：https://bbs.csdn.net/topics/616574177
搭建vue3+ts+antd的指引：認(rèn)識(shí)vite_vue3 初始化項(xiàng)目到打包
?利用inscode免費(fèi)開(kāi)放資源
InsCode 是一個(gè)一站式的軟件開(kāi)發(fā)服務(wù)平臺(tái)，從開(kāi)發(fā)-部署-運(yùn)維-運(yùn)營(yíng)，都可以在 InsCode 輕松完成。 InsCode
為每位開(kāi)發(fā)者提供了免費(fèi)的 2 核/4 GB 云端開(kāi)發(fā)環(huán)境。InsCode 的 Cloud IDE
是運(yùn)行于瀏覽器的集成開(kāi)發(fā)環(huán)境（IDE），開(kāi)發(fā)者只需要瀏覽器，有網(wǎng)絡(luò)環(huán)境，就可以隨時(shí)隨地寫(xiě)代碼，不用下載安裝，不受硬件、環(huán)境的影響。InsCode 的 Cloud IDE 底層基于 VSCode 開(kāi)發(fā)，使用體驗(yàn)與桌面版 VS Code
幾乎一致，提供了高效的文件搜索、Git 版本控制、Debug 調(diào)試、數(shù)據(jù)庫(kù)、終端、在線預(yù)覽等功能。
重點(diǎn)
InsCode 可以一鍵部署開(kāi)發(fā)的應(yīng)用，或者直接部署 GitHub 應(yīng)用。部署后提供獨(dú)立的域名訪問(wèn)，并永久在線。
?? 在inscode搭建vue3+ts+ant項(xiàng)目
在git倉(cāng)庫(kù)拿到https鏈接(選擇我之前搭建的vue3+ts+antd的git倉(cāng)庫(kù)導(dǎo)入)
導(dǎo)入inscode作為模板
導(dǎo)入成功！
安裝依賴
$ npm i
?? 調(diào)整配置
vite.config.js
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({
// 打包相對(duì)路徑
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配置
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 國(guó)際化配置
app.ts
<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>
<!-- 國(guó)際化配置-->
<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
// 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
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()] : [],
});
?? 路由權(quán)限
router/index.ts
// import { useStore } from "vuex";
import * as VueRouter from "vue-router";
import store from "../store/index.js";
/**
* 基礎(chǔ)路由
* @type { *[] }
*/
const constantRouterMap: any = [
{
path: "/",
name: "dashboard",
// @ts-ignore
component: () => import("@/view/layout/Layout.vue"),
meta: { title: "首頁(yè)" },
},
{
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: "注冊(cè)" },
},
];
// 3. 創(chuàng)建路由實(shí)例并傳遞 `routes` 配置
// 你可以在這里輸入更多的配置，但我們?cè)谶@里
// 暫時(shí)保持簡(jiǎn)單
const router: any = VueRouter.createRouter({
// 4. 內(nèi)部提供了 history 模式的實(shí)現(xiàn)。為了簡(jiǎn)單起見(jiàn)，我們?cè)谶@里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes: constantRouterMap,
});
// 路由權(quán)限 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;
?? 預(yù)覽
運(yùn)行指令
npm i && npm run dev
運(yùn)行成功截圖：
inscode資源如下：
?結(jié)束
本文分享到這結(jié)束，如有錯(cuò)誤或者不足之處歡迎指出！
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-576487.html
?? 點(diǎn)贊，是我創(chuàng)作的動(dòng)力！
?? 收藏，是我努力的方向！
?? 評(píng)論，是我進(jìn)步的財(cái)富！
?? 感謝你的閱讀！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-576487.html
到了這里，關(guān)于csdn新星計(jì)劃vue3+ts+antd賽道——利用inscode搭建vue3(ts)+antd前端模板的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
