iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

前端?後端?你早晚都要全端的,何不從現在開始?系列 第 9

[Day 9] 前端環境建置 WebStorm、Vue

好滴
最麻煩的部分終於結束啦
準備開始寫程式啦~

今天先把前端的環境裝起來
我主要會用 Vue 搭配 Vuetify

前端 IDE - WebStorm

IDE 的部分我是使用 WebStorm

他有30天試用期,超過30天就要付費使用
But!! 如果有學生信箱的捧由,可以用學生信箱去註冊,就可以免費使用教育版

https://ithelp.ithome.com.tw/upload/images/20210924/20140745ynp9wvaRaH.png

推一下 JetBrains 裡面有很多 IDE 跟工具,只要註冊一個帳號裡面的IDE都可以使用

順便說一下後端也是用這邊的 IDE - PyCharm ,之後會再介紹

https://ithelp.ithome.com.tw/upload/images/20210924/201407459gV5ASjMdg.png

如果沒有學生帳號用 VScode 也是可以的,只要裝Vue 的plugin即可

安裝 Vue

Vue 目前有 Vue 2 跟 Vue 3 二種,

不過目前 Vuetify 只有支援到 Vue 2 ,因此這次還是先以 Vue 2 為主

等未來 Vuetify 有支援 3的時候再來考慮重構

https://ithelp.ithome.com.tw/upload/images/20210924/20140745IEWKKjtaYp.png

Vue 的官方文檔寫的蠻詳細的

他有提供一個快速建構專案的工具 Vue CLI

安裝 Vue-cli

開啟電腦的 命令提示字元 ( CMD ) 工具,輸入以下指令,按enter,他就會開始安裝了

npm install -g @vue/cli
# OR
yarn global add @vue/cli

https://ithelp.ithome.com.tw/upload/images/20210924/201407452hWOCDCc9z.png

如果有看到下面這個畫面就代表安裝成功

https://ithelp.ithome.com.tw/upload/images/20210924/20140745GbjA4HttHW.png

建立專案

接著就可以建立Vue專案了,先輸入指令

vue init webpack event-platform (這邊是專案名稱)

他告訴我要使用 vue init 指令 需要先執行

npm i -g @vue/cli-init

https://ithelp.ithome.com.tw/upload/images/20210924/20140745bGTKklNeWb.png

完成後再輸入一次上面的 init 指令

他會問一些專案的設定問題,依需求回答即可

https://ithelp.ithome.com.tw/upload/images/20210924/20140745E2SivzBNch.png

他就會開始幫你建立專案了

https://ithelp.ithome.com.tw/upload/images/20210924/20140745E1LGZKeIds.png

專案建立位置預設在當前資料夾下面 新增一個專案名稱資料夾

因此如果要改其他位置的人,可以要先用 cd 移到指定位址

像我這邊安裝完就預設是在 C:\Users\Huang47\event-platform

如果是建立後要調整位置,可以到C槽把 event-platfom 這個資料夾直接搬移到想放的地方

用WebStorm開啟專案

打開WebStorm後會長這樣,可以點選Open 然後去開啟剛剛建立的 event-project

https://ithelp.ithome.com.tw/upload/images/20210924/201407452jYTSN1eKV.png

如果打開看到這樣的畫面就代表建立成功!

https://ithelp.ithome.com.tw/upload/images/20210924/20140745NN41V5iXLF.png

添加Vuetify

注意! 此為vue-cli的安裝方法,另有webpack版的安裝法,請參考 Day11

在WebStorm視窗下方有個很方便的 Terminal ( 終端機 ),

他可以執行PowerShell的指令

現在先輸入

vue add vuetify

https://ithelp.ithome.com.tw/upload/images/20210924/20140745CdeyKMQtnR.png

選擇版本的地方 選 Default , 這樣就安裝完啦

https://ithelp.ithome.com.tw/upload/images/20210924/20140745zD3LVYRW68.png

如果在安裝有遇到 因為這個系統上已停用指令碼執行,所以無法載入...

這類問題的話,是因為電腦的權限沒有開,

可以參考 這篇MicroSoft文檔

照著操作就可以解決啦~


ok 那前端的環境目前算完成了!

大家明天見


上一篇
[Day 8] 設計UI畫面-Figma
下一篇
[Day 10] 前端頁面路由設定 vue-router
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31

尚未有邦友留言

立即登入留言