後端開發的前端瞎搞之路——新建Vue工程

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第27天,點選檢視活動詳情


哈嘍,大家好,我是一條。

眾多周知我是個後端程式設計師,但當初學習程式設計的時候我是學過前端的,奈何太久不用,都換還回去了。

現在工作呢,也用不上,只是隔壁的大佬們都是前後端都會,妥妥的全棧,這顯得我就很low了,索性就搞一搞。

後端程式設計師的前端瞎搞之路,就開始了!

從新建專案開始

開始不著急,先建個專案看看啥樣,前端的編輯器我也用過幾款,像Hbuilder、VSCode、WebStrom。同事大佬都用的 VSCode ,但我實在是用不慣,我更喜歡 WebStrom。

但是!!!

我發現WebStrom過於傻瓜,可自定義配置的部分比較少,所以就選擇先在命令列建立完,再匯入WebStrom。

安裝Vue/Cli

npm install -g @vue/cli vue --version

其實我以前安裝過的,所以這步就略過,之間建立工程。

vue create java-book

接下來就是關鍵部分,

配置專案

首先,選擇手動建立,自定義配置,然後用空格鍵新增需要的元件或功能。

再選擇vue的版本,這裡用的是ts和Vue 3。

image-20220627152457165

回車之後就開始建立工程了,完成如如下:

然後再匯入webstorm,就可以愉快的開發了。

image.png

整合 ant-design-vue

人們數值的vue框架都是element ui,但我覺得太醜,問了一下前端同事,推薦antd,使用的方式和java差不多,先下載依賴,再匯入。

sudo npm i --save ant-design-vue

main.ts全域性匯入,

import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css';

然後就可以參考官網文件,引入各種元件了。

非常的簡單。

官網:https://www.antdv.com/components/layout-cn#API

效果圖

簡單看一下效果圖吧,這裡已經接入後端的資料了,就是樣式還沒調整。

最後

前端其實搞起來還是很好玩的,下期介紹前後端聯調。