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

後端開發的前端瞎搞之路——新建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。

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

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

人們數值的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';

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

非常的簡單。

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

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