使用vue3搭建后臺(tái)系統(tǒng)的詳細(xì)步驟
更新時(shí)間：2022年08月22日 16:11:41 作者：龍茶清歡
這篇文章主要介紹了使用vue3搭建后臺(tái)系統(tǒng)的過程記錄,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
首先使用npm 或者yarn創(chuàng)建一個(gè)vue項(xiàng)目
// 使用npm創(chuàng)建一個(gè)基于vite構(gòu)建的vue項(xiàng)目 npm create vite@latest // 使用yarn創(chuàng)建一個(gè)基于vite構(gòu)建的vue項(xiàng)目 yarn create vite@latest
在創(chuàng)建的構(gòu)成中選擇
vue??????? vue-ts
創(chuàng)建完之后將項(xiàng)目拖到編譯器打開
一、配置vite
在vite.config.ts文件中配置項(xiàng)目的服務(wù)數(shù)據(jù)，配置如下：
// 此處配置項(xiàng)目服務(wù)參數(shù)
server: {
host: "0.0.0.0", // 項(xiàng)目運(yùn)行地址，此處代表localhost
port: 8888, // 項(xiàng)目運(yùn)行端口
open: true, //編譯之后是否自動(dòng)打開頁面
hmr: true, // 是否開啟熱加載
},之后server下方接著配置src的別名@，配置如下
// 配置src的別名@
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
},此外還需在ts的配置文件tsconfig.json中加入以下配置：
"baseUrl": "./", // 配置路徑解析的起點(diǎn)
"paths": { // 配置src別名
"@/*": ["src/*"] // 當(dāng)我們輸入@/時(shí)會(huì)被映射成src/
} 二、router路由
1、安裝router路由
npm install vue-router@latest yarn add vue-router@latest
2、配置router路由
在src下新建router文件夾，同時(shí)創(chuàng)建index.ts并配置如下
import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
import Layout from '@/components/HelloWorld.vue'
// 定義路由，此處為Array數(shù)組，數(shù)據(jù)類型為RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
{
path: '/home',
name: 'home',
component: Layout
}
]
// 創(chuàng)建路由
const router = createRouter({
history: createWebHistory(),
routes // 將定義的路由傳入
})
// 將創(chuàng)建的router路由暴露，使其在其他地方可以被引用
export default router3、注冊router路由
在main.ts中先通過 import router from '@/router/index' 引入路由，然后使用use函數(shù)注冊路由，具體如下：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 此處引入定義的路由
import router from '@/router/index'
// createApp(App).mount('#app')
// 此處將鏈?zhǔn)絼?chuàng)建拆解，從中注冊路由
const app = createApp(App);
// 注冊路由
app.use(router)
app.mount('#app')4、使用router路由
注冊完成之后，在程序入口App.vue中通過 <router-view></router-view> 使用路由，具體如下：
<template>
<!-- <div>
<a rel="external nofollow" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a rel="external nofollow" target="_blank">
<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div> -->
<!-- 在App的入口程序使用路由,會(huì)將我們注冊的路由全部引入到App入口,通過路由的路徑確定跳轉(zhuǎn)的頁面 -->
<router-view></router-view>
</template>三、安裝element plus等其他依賴
# 選擇一個(gè)你喜歡的包管理器 // 安裝element-plus npm install element-plus --save yarn add element-plus pnpm install element-plus // 安裝element-plus的圖標(biāo)庫組件 npm install @element-plus/icons-vue yarn add @element-plus/icons-vue pnpm install @element-plus/icons-vue
1、注冊element plus并配置圖標(biāo)
和router一樣都是在main.ts中注冊，配置如下：
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 次數(shù)引入定義的路由
import router from "@/router/index";
// 引入element-plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 引入element-plus的圖標(biāo)庫
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// createApp(App).mount('#app')
// 此處將鏈?zhǔn)絼?chuàng)建拆解，從中注冊路由
const app = createApp(App);
// 注冊路由、element-plus等
app.use(router).use(ElementPlus);
// 將所有配置掛載到index.html的id為app的容器上
app.mount("#app");
// 此處參考官網(wǎng)，意為將圖標(biāo)庫中的每個(gè)圖標(biāo)都注冊成組件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}四、pinia使用
1、安裝pinia
yarn add pinia # 或者使用 npm npm install pinia
2、注冊pinia
// 從pinia中引入創(chuàng)建實(shí)例的函數(shù)
import { createPinia } from 'pinia'
// 使用createPinia函數(shù)創(chuàng)建一個(gè)pinia實(shí)例并注冊
app.use(createPinia())3、配置pinia
在src下面新建store文件夾并新建index.ts文件,并配置如下：
// 從pinia中引入defineStore函數(shù)來定義store
import { defineStore } from "pinia";
// 定義一個(gè)store并取名為useStore
// defineStore第一個(gè)參數(shù)是應(yīng)用程序中store的唯一標(biāo)識(shí)，也就是在定義其他store時(shí)該標(biāo)識(shí)不能相同
// 此處可以類比為java中的實(shí)體類，useStore就是類名，state里的屬性是成員屬性，getters里的函數(shù)是getter方法，actions里的函數(shù)是setter方法
export const useStore = defineStore("useStore", {
// 定義state
// 推薦使用 完整類型推斷的箭頭函數(shù)
state: () => {
return {
// 所有這些屬性都將自動(dòng)推斷其類型
count: 0,
name: "Eduardo",
isAdmin: true,
};
},
// 定義getters,里面定義一些對state值的取值操作
// 指向箭頭函數(shù)定義的時(shí)候所處的對象，而不是其所使用的時(shí)候所處的對象，默認(rèn)指向父級的this
// 普通函數(shù)中的this指向它的調(diào)用者，如果沒有調(diào)用者則默認(rèn)指向window
getters: {
doubleCount: (state) => state.count * 2,
doubleCountOne(state) {
return state.count * 2;
},
doublePlusOne(): number {
return this.count * 2 + 1;
},
},
// 定義actions,里面定義一些對state的賦值操作
actions: {
setCounter(count:number){
this.count = count
}
}
});
// 1、只有一個(gè)參數(shù)的時(shí)候，參數(shù)可以不加小括號(hào)，沒有參數(shù)或2個(gè)及以上參數(shù)的，必須加上小括號(hào)
// 2、返回語句只有一條的時(shí)候可以不寫{}和return，會(huì)自動(dòng)加上return的，返回多條語句時(shí)必須加上{}和return
// 3、箭頭函數(shù)在返回對象的時(shí)候必須在對象外面加上小括號(hào)
// 在vue中定義函數(shù)時(shí)，我們盡量都指明函數(shù)返回值類型以及參數(shù)的數(shù)據(jù)類型4、測試pinia
<template>
<!-- 測試element-plus -->
<el-button type="primary">Primary</el-button>
<!-- 測試element-plus圖標(biāo) -->
<div style="font-size: 20px">
<Edit style="width: 1em; height: 1em; margin-right: 8px" />
<Share style="width: 1em; height: 1em; margin-right: 8px" />
<Delete style="width: 1em; height: 1em; margin-right: 8px" />
<Search style="width: 1em; height: 1em; margin-right: 8px" />
</div>
<h2>方式一、直接通過store.count++</h2>
<!-- 測試pinia -->
<h3>直接從store取值并測試pinia:{{ count }}</h3>
<el-button type="primary" @click="addCount">增加</el-button>
<h3>使用storeToRefs函數(shù)解析store后測試pinia:{{ count1 }}</h3>
<el-button type="primary" @click="addCount1">增加</el-button>
<h2>方式二、通過調(diào)用store中的函數(shù)</h2>
<h3>通過store中的函數(shù)并測試pinia:{{ count1 }}</h3>
<el-button type="primary" @click="addCount2">增加</el-button>
</template>
<script setup lang="ts">
import { useStore } from "@/store/index";
import { storeToRefs } from "pinia"; // 解析store中的數(shù)據(jù)，如成員屬性、方法
// 創(chuàng)建了一個(gè)useStore實(shí)例對象
const store = useStore();
// 增加成員屬性count的值，方式一、直接通過store.count++
// 拿到成員屬性count,但這樣取值會(huì)失去響應(yīng)性，也就是不能實(shí)時(shí)同步，當(dāng)我們點(diǎn)擊增加按鈕后，雖然操作已經(jīng)完成，count也增加了，但展示有延遲
// 這個(gè)取值過程可能涉及解析數(shù)據(jù)，從而導(dǎo)致函數(shù)執(zhí)行完后數(shù)據(jù)沒有變化
const count = store.count;
const addCount = () => {
store.count++;
};
// 通過pinia中的storeToRefs函數(shù)將store中的數(shù)據(jù)都進(jìn)行解析
const count1 = storeToRefs(store).count;
const addCount1 = () => {
store.count++;
};
// 方式二、通過調(diào)用store中的函數(shù)
const addCount2 = () => {
store.setCounter(++store.count)
};
</script>
<style scoped>
.read-the-docs {
color: #888;
}
</style>五、layout布局
在配置layout之前，我們還需要對一些標(biāo)簽做初始化的樣式設(shè)置，比如：html、body等，具體如下
在項(xiàng)目的index.html文件下添加樣式設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<!-- 此處為程序的最終入口,會(huì)引入App.vue 并將相應(yīng)的配置掛載到id為app <div id="app"></div> 上 -->
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
<!-- 這里對html、body、掛載容器div做樣式的初始化設(shè)置，去除原有的設(shè)置 -->
<style lang="less">
html,body,#app {
padding: 0px;
margin: 0px;
height: 100%;
box-sizing: border-box;
}
#app {
width: 100%;
max-width: 100%;
}
</style>之后在src下新建layout文件夾并新建index.vue文件，配置如下：
整個(gè)el-container為layout布局的整體，其下又可以按照布局的不同劃分出不同的區(qū)塊，但總結(jié)起來可以劃分為：1、側(cè)邊菜單欄；2、頭部區(qū)；3、內(nèi)容展示區(qū)；4、尾部區(qū)，我們根據(jù)自己的需要進(jìn)行選擇組合，這些劃分出來的區(qū)塊涉及到不同的配置和處理，因此，我們可以將這些大的區(qū)塊從layout整體布局中抽離成組件，讓代碼擁有更好的可讀性；此外，每個(gè)抽離的組件自己本身也可能存在需要拆分的問題。我們通過拆分，可以很好的將一個(gè)問題化繁為簡，從而很輕松的解決。
<template>
<el-container class="container">
<!-- layout布局左側(cè)菜單區(qū) -->
<el-aside width="200px" class="aside">
<!-- 菜單項(xiàng)，通過組件的形式引入 -->
<Menu></Menu>
</el-aside>
<!-- layout布局內(nèi)容區(qū) -->
<el-container>
<!-- 內(nèi)容區(qū)頭部 -->
<el-header class="header">
<!-- 頭部組件，抽離成組件形式 -->
<Header></Header>
</el-header>
<!-- 內(nèi)容區(qū)的主體，用于數(shù)據(jù)展示 -->
<el-main class="content">Main</el-main>
</el-container>
</el-container>
</template>
<script setup lang="ts">
// vue3中組件引入后不需要使用conponents注冊，可以直接使用
import Header from '@/layout/header/Header.vue'
import Menu from '@/layout/menu/Menu.vue'
</script>
<style scoped lang="less">
.container {
height: 100%;
.aside {
background-color: antiquewhite;
}
.header {
background-color: aquamarine;
}
.content {
background-color: pink
}
}
</style>從layout布局抽離的菜單欄組件：
<template>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:unique-opened='uniqueOpenedFlag'
>
<!-- 在為el-menu設(shè)置unique-opened屬性時(shí)必須要確保el-sub-menu、el-menu-item中index的唯一性，如果index不唯一則不生效 -->
<!-- 本組件作為父組件向子組件傳遞數(shù)據(jù)menuList，子組件需要定義menuList屬性以確保可以接受該數(shù)據(jù) -->
<menu-item :menuList="menuList"></menu-item>
</el-menu>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import MenuItem from "@/layout/menu/item/MenuItem.vue";
// 自定義的假的樹形菜單數(shù)據(jù)
// reactive函數(shù)用來處理響應(yīng)式數(shù)據(jù)，處理的數(shù)據(jù)一般是復(fù)雜類型數(shù)據(jù)，如對象類型
// ref函數(shù)也可以處理響應(yīng)式數(shù)據(jù)，不過數(shù)據(jù)一般是基本數(shù)據(jù)類型
const isCollapse = ref(false)
const uniqueOpenedFlag = ref(true)
const menuList = reactive([
{
path: "/system",
name: "system",
component: "Layout",
meta: {
title: "系統(tǒng)管理",
icon: "Setting",
roles: ["sys:manage"],
},
children: [
{
path: "/worker",
name: "worker",
component: "Layout",
meta: {
title: "員工管理",
icon: "Setting",
roles: ["sys:manage"],
},
},
{
path: "/happy",
name: "happy",
component: "Layout",
meta: {
title: "菜單管理",
icon: "Setting",
roles: ["sys:manage"],
},
},
],
},
{
path: "/mail",
name: "mail",
component: "Layout",
meta: {
title: "商場管理",
icon: "Setting",
roles: ["sys:manage"],
},
children: [
{
path: "/worker11",
name: "worker11",
component: "Layout",
meta: {
title: "員工管理22",
icon: "Setting",
roles: ["sys:manage"],
},
},
{
path: "/happy22",
name: "happy22",
component: "Layout",
meta: {
title: "菜單管理22",
icon: "Setting",
roles: ["sys:manage"],
},
},
],
},
]);
</script>
<style lang="less" scoped></style>從菜單欄抽離的菜單項(xiàng)組件：
<template>
<template v-for="item in menuList" :key="item.path">
<!-- 判斷該菜單項(xiàng)是否有子菜單 -->
<el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" >
<template #title>
<el-icon>
<!-- 通過動(dòng)態(tài)組件展示圖標(biāo)，因?yàn)閳D標(biāo)數(shù)據(jù)一般是通過后端查數(shù)據(jù)庫拿到的 -->
<component :is="item.meta.icon"></component>
</el-icon>
<span>{{ item.meta.title }}</span>
</template>
<!-- 遞歸調(diào)用，將子菜單傳遞給組件處理 -->
<menu-item :menuList="item.children"></menu-item>
</el-sub-menu>
<el-menu-item v-else :index="item.path">
<el-icon>
<!-- 通過動(dòng)態(tài)組件展示圖標(biāo) -->
<component :is="item.meta.icon"></component>
</el-icon>
<span>{{ item.meta.title }}</span>
</el-menu-item>
</template>
</template>
<script setup lang="ts">
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from "@element-plus/icons-vue";
// 子組件接受父組件傳遞的數(shù)據(jù)
// 本組件為子組件，接受父組件傳過來的數(shù)據(jù)，此處定義menuList屬性，接受父組件傳遞的menuList數(shù)據(jù)
defineProps(["menuList"]);
</script>
<style lang="less" scoped></style>六、菜單欄logo
首先，將自己準(zhǔn)備的logo圖片放到src下的assets文件夾下，然后在layout的menu的logo文件夾下新建MenuLogo.vue文件，并配置如下：
<template>
<div class="logo">
<img :src="Logo" />
<span class="logo-title">{{ title }}</span>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Logo from "@/assets/logo.png";
const title = ref("博客管理系統(tǒng)");
</script>
<style lang="less" scoped>
.logo {
display: flex; // 彈性布局
width: 100%;
height: 60px;
line-height: 60px;
background-color: rgb(234, 255, 127);
text-align: center;
cursor: pointer; // 鼠標(biāo)懸浮在元素上時(shí)，鼠標(biāo)從箭頭變成小手
align-items: center;
img {
width: 36px;
height: 36px;
margin-left: 20px; // 元素的外邊距
margin-right: 12px;
}
.logo-title {
font-weight: 800; // 800為加粗
color: black;
font-size: 20px;
line-height: 60px; // 元素上下居中
font-family: FangSong; // 字體類型
}
}
</style>最后在菜單欄組件中引入菜單logo組件并使用
// 在script標(biāo)簽中引入 import MenuLogo from "@/layout/menu/logo/MenuLogo.vue"; // el-menu標(biāo)簽上方引入使用 <menu-logo></menu-logo>
效果如下：
七、路由和頁面聯(lián)動(dòng)
在src的router的index.ts文件下添加如下路由配置并在views文件夾下創(chuàng)建對應(yīng)的文件
{
path: "/",
component: Layout, // 每個(gè)路由都需要通過component指定歸屬的布局組件
redirect: "/index",
name: "Root",
children: [
{
path: "/index",
name: "Index",
component: () => import("@/views/index/index.vue"),
meta: {
title: "首頁看板",
icon: "icon-home",
affix: true,
noKeepAlive: true,
},
},
],
},
{
path: "/comp",
component: Layout,
name: "Comp",
meta: { title: "系統(tǒng)管理", icon: "icon-code" },
children: [
{
path: "/element",
name: "ElementComp",
component: () => import("@/views/element/index.vue"),
meta: {
title: "菜單管理",
icon: "icon-code",
},
},
{
path: "/iconPark",
name: "IconPark",
component: () => import("@/views/icon/index.vue"),
meta: {
title: "路由管理",
icon: "icon-like",
},
},
{
path: "/chart",
name: "Chart",
component: () => import("@/views/echarts/index.vue"),
meta: {
title: "員工管理",
icon: "icon-chart-line",
},
children: [
{
path: "/line",
name: "Line",
component: () => import("@/views/echarts/line.vue"),
meta: {
title: "商品管理",
},
},
{
path: "/bar",
name: "Bar",
component: () => import("@/views/echarts/bar.vue"),
meta: {
title: "手機(jī)管理",
},
},
{
path: "/otherChart",
name: "OtherChart",
component: () => import("@/views/echarts/other.vue"),
meta: {
title: "會(huì)員管理",
},
},
],
},
],
},
{
path: "/errorPage",
name: "ErrorPage",
component: Layout,
meta: {
title: "用戶管理",
icon: "icon-link-cloud-faild",
},
children: [
{
path: "/404Page",
name: "404Page",
component: () => import("@/views/errorPage/404.vue"),
meta: {
title: "角色管理",
icon: "icon-link-cloud-faild",
},
},
{
path: "/401Page",
name: "401Page",
component: () => import("@/views/errorPage/401.vue"),
meta: {
title: "權(quán)限管理",
icon: "icon-link-interrupt",
},
},
],
},添加完路由配置之后，創(chuàng)建路由的對應(yīng)文件并添加一些描述文字，此時(shí)雖然路由和對應(yīng)的頁面都已經(jīng)創(chuàng)建完畢并關(guān)聯(lián)在了一起，但路由并沒有被引用，也就無法在正確的位置展示路由頁面的數(shù)據(jù)，所以，我們需要將路由引用到layout布局的main區(qū)域，也就是數(shù)據(jù)展示區(qū)，確保當(dāng)我們訪問某個(gè)路由時(shí)，對應(yīng)的路由頁面能夠在該區(qū)域展示。
1、路由和頁面聯(lián)動(dòng)的注意細(xì)節(jié)
在菜單項(xiàng)組件中，我們給菜單項(xiàng)的index屬性綁定了路由的path值，其用意是為了啟用element-plus中提供的一種在激活導(dǎo)菜單時(shí)（當(dāng)我們點(diǎn)擊某個(gè)菜單項(xiàng)時(shí)，該菜單項(xiàng)就是被激活的菜單）以index作為path進(jìn)行路由跳轉(zhuǎn)，所以為了我使用這個(gè)功能，我們還需要在菜單欄組件的el-menu標(biāo)簽中添加 router 屬性以開啟該功能，同時(shí)再添加 default-active 屬性來指明當(dāng)前被激活的菜單。用例如下
<template>
<menu-logo></menu-logo>
<el-menu
:default-active="activeIndex"
class="el-menu-vertical-demo"
:unique-opened="uniqueOpenedFlag"
router
>
<!-- 在為el-menu設(shè)置unique-opened屬性時(shí)必須要確保el-sub-menu、el-menu-item中index的唯一性，如果index不唯一則不生效 ，一般我們?yōu)閕ndex綁定路由的path值 -->
<!-- 本組件作為父組件向子組件傳遞數(shù)據(jù)menuList，子組件需要定義menuList屬性以確保可以接受該數(shù)據(jù) -->
<!-- router屬性可以激活以 index 作為 path 進(jìn)行路由跳轉(zhuǎn) -->
<!-- default-active屬性用來指明當(dāng)前被激活的菜單，其值為菜單項(xiàng)中index的值，也就是path值 -->
<menu-item :menuList="menuList"></menu-item>
</el-menu>
</template>
import { useRouter, useRoute } from "vue-router";
// 獲取當(dāng)前點(diǎn)擊的路由
const route = useRoute();
// 從路由中獲取path
const activeIndex = computed(() => {
const { path } = route;
return path;
});
到此這篇關(guān)于使用vue3搭建后臺(tái)系統(tǒng)的過程記錄的文章就介紹到這了,更多相關(guān)vue3后臺(tái)系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了如何讓別人訪問本地運(yùn)行的vue項(xiàng)目，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 實(shí)現(xiàn)邊輸入邊搜索功能的實(shí)例講解
今天小編就為大家分享一篇vue 實(shí)現(xiàn)邊輸入邊搜索功能的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗(yàn)
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗(yàn)的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)詳解
記錄一下自己最近開發(fā)vue3.0的小小問題,下面這篇文章主要給大家介紹了關(guān)于vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
springboot和vue前后端交互的實(shí)現(xiàn)示例
本文主要介紹了springboot和vue前后端交互的實(shí)現(xiàn)示例,將包括一個(gè)簡單的Vue.js前端應(yīng)用程序,用于發(fā)送GET請求到一個(gè)Spring Boot后端應(yīng)用程序,以獲取并顯示用戶列表,感興趣的可以了解一下2024-05-05
vue中組件的過渡動(dòng)畫及實(shí)現(xiàn)代碼
這篇文章主要介紹了vue中組件的過渡動(dòng)畫，并通過實(shí)例代碼給大家介紹了過渡動(dòng)畫的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對數(shù)組和對象的處理本質(zhì)上的一樣的,對新增的值添加響應(yīng)然后手動(dòng)觸發(fā)派發(fā)更新,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue實(shí)現(xiàn)全局的toast組件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個(gè)Vue-element-admin中的流程可能對于新的同學(xué)不是很友好，所以本文將結(jié)合實(shí)例代碼，介紹Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)，感興趣的小伙伴們可以參考一下2021-06-06