前言
作為Java程序員，vue3還是有必要學(xué)的，畢竟是國(guó)內(nèi)最受歡迎的前端JS框架，你現(xiàn)在接手的項(xiàng)目，前端部分幾乎都會(huì)和vue沾邊，尤其是中小企業(yè)。
vue3作為新的大版本，相較于vue2改動(dòng)還是很多的，目前企業(yè)中很多新項(xiàng)目的前端實(shí)際上已經(jīng)是以vue3為主了。
比如我所在的互聯(lián)網(wǎng)公司，前端人員均已經(jīng)在用vue3來(lái)搭建所有的新項(xiàng)目。
vue3中的 Composition Api 實(shí)際上很多地方可以用Java的思維來(lái)理解，所以Java程序員學(xué)習(xí)vue3還是挺適合的。
我推薦學(xué)會(huì)了vue3基礎(chǔ)的Java工程師，嘗試搭建自己的后臺(tái)管理模板，這是提高vue3熟練度最快的方式。
正文
1、學(xué)TypeScript？
為什么單獨(dú)講下這個(gè)，主要是我自己作為多年的Java工程師，學(xué)習(xí)TypeScript的一點(diǎn)感受，不吐不快。
這語(yǔ)言看著真的很難受，就像是刻意拼湊的四不像語(yǔ)言，也許前端人員看著挺好，但作為Java工程師，實(shí)在是學(xué)的如鯁在喉。
另外，我們公司的前端今年也沒(méi)有在新項(xiàng)目中使用TS了，用他的話說(shuō)，一些中小項(xiàng)目用了反而添麻煩，不如不用。
所以純粹是我個(gè)人對(duì)Java工程師的建議，TypeScript就先別花那么多時(shí)間學(xué)了，了解下就好，姑且學(xué)學(xué)vue3就夠了。
2、搭建后臺(tái)架子
我去年學(xué)習(xí)vue3，在學(xué)會(huì)了基礎(chǔ)語(yǔ)法后，就嘗試搭建一個(gè)后臺(tái)管理模板，選用的是Naive-UI。
因?yàn)楣颈旧砬岸擞玫亩际荅lementPlus，所以自己學(xué)習(xí)就想換個(gè)口味。
我把模板大體分為幾個(gè)部分：外層架子，菜單組件，頭部組件，標(biāo)簽頁(yè)組件。
后臺(tái)模板的架子大概是這樣，包含了菜單、頭部、主體內(nèi)容，這就是架子的基本結(jié)構(gòu)，主體內(nèi)容也就是根據(jù)路由動(dòng)態(tài)加載的頁(yè)面。
3、菜單組件
左側(cè)菜單組件，使用 Composition Api 的方式來(lái)搭建，其實(shí)沒(méi)那么難，按照J(rèn)ava的方式來(lái)理解就行。
如圖所示，那么組件中引入的類又是長(zhǎng)什么樣呢？
其實(shí)拆解來(lái)看，就是Java類一樣，包含變量、方法、初始化操作等等。
最后，把獲取的結(jié)果return出去，是不是理解起來(lái)清晰多了。
4、頭部組件
頭部組件，其實(shí)和菜單組件的做法沒(méi)啥區(qū)別了，直接往里套就行。
頭部組件，主要實(shí)現(xiàn)了面包屑功能，以及路由跳轉(zhuǎn)。
5、標(biāo)簽頁(yè)組件
標(biāo)簽頁(yè)是屬于頭部組件的一部分，但是也拆解為一個(gè)小組件。
這里面，實(shí)現(xiàn)了用cookie來(lái)緩存標(biāo)簽頁(yè)列表。
實(shí)現(xiàn)了新增標(biāo)簽的方法
實(shí)現(xiàn)了關(guān)閉標(biāo)簽的方法
實(shí)現(xiàn)了選中標(biāo)簽的觸發(fā)事件，以及選中菜單后路由的監(jiān)聽(tīng)事件，目的是切換菜單時(shí)標(biāo)簽跟著變化，切換標(biāo)簽時(shí)菜單也跟著變化的效果。
6、全局守衛(wèi)
這個(gè)是我覺(jué)得挺常用的功能，前置守衛(wèi)和后置守衛(wèi)。
用Spring的方式理解，就是AOP里面的切面。
7、router-view
一開(kāi)始搭的架子里面，主體內(nèi)容的router-view中其實(shí)就是要加載的頁(yè)面，如圖所示。
8、最終效果
總結(jié)
其實(shí)我就是單純搭建了一個(gè)后臺(tái)管理的模板，很多功能都沒(méi)有實(shí)現(xiàn)。
比如退出、表單表格等常用組件的展示、標(biāo)簽頁(yè)的優(yōu)化等等，都沒(méi)做，因?yàn)槲矣X(jué)得單純學(xué)習(xí)vue3，到這一步也就夠了。
至于做的更完美，那就純看個(gè)人興趣了。
我主要想以Java工程師的角度來(lái)講述如何學(xué)習(xí)前端的一些東西，希望對(duì)后端程序員尤其是Java程序員學(xué)習(xí)前端有所啟發(fā)。
至于模板的代碼，都在git上，直接去下載了自己練習(xí)即可，想繼續(xù)完善也可以。
Gitee：https://gitee.com/fangfuji/java-share
如果喜歡，↓↓↓可以點(diǎn)贊關(guān)注下哦，持續(xù)分享干貨！
