開發前端需要准備一些開發工具,這些工具怎么安裝就不詳細描寫了,度娘一些很多很多。主要把核心的開發工具列表一些,這些資源也是非常容易找到和安裝的。
- Node 安裝:https://nodejs.org/en/ 安裝LTS版本,驗證安裝成功:node -v ; npm -v
- Typescript 安裝:npm install typescript -g 驗證安裝成功:tsc -v
- Yarn 安裝:npm install -g yarn 驗證安裝成功:yarn -v
- Vue3.0 以及相關工具安裝:npm install vue@next ;npm install -D @vue/compiler-sfc;yarn global add @vue/cli;
設置NPM包鏡像地址,更改成淘寶鏡像:npm config set registry=https://registry.npm.taobao.org,執行檢查:npm config list
Windows10 安裝Typesscript 的時候可能會遇到一個小坑,需要把RemoteSigned 打開,需要執行一個PowerShell 語句:set-ExecutionPolicy RemoteSigned,安裝完畢后,按照下圖檢查,第一階段前端開發必須條件安裝完畢。
安裝完相應的前端開發工具,現在開始研究一下開源的前端框架,我推薦先研究“Vue Antd Admin” 這個不錯的框架,省去了很多不必要的開發。首先clone 下來源碼:git clone https://github.com/iczer/vue-antd-admin,下載 完畢后,進入文件夾,先按照文檔提示,先運行起來,看看效果。打開PowerShell 工具,運行:$ yarn install; $ yarn serve
運行后效果如下圖,感覺界面風格比較中規中矩,適合大部分的管理平台。后面講對該框架進行逐步的探索。