vscode 起手vue cli

最近剛有新筆電 開始想寫些side project 經過一陣子的磨練發現自己寫工具的能力大大提升
心想那何不增加自己的github stat,剛好把這些過程稍微紀錄一下生篇文章給需要的人
vscode 算現在最潮的editor, vue 也從library漸漸發展成framework 那就開始吧

首先先安裝vscode吧
https://code.visualstudio.com/

再來安裝我們的nodejs
https://nodejs.org/en/
左邊LTS算是穩定版  右邊算是現在的版本
我們就選擇穩定版吧  這個看個人需求

再來就可以開始安裝我們的vue cli了
vue cli 可以幫助我們在開發vue上快速建立起我們的環境及基本的設定
相關文件可以參考
https://cli.vuejs.org/guide/


首先開啟我們的vscode 在我們的終端機開輸入我們以下語法

 
npm install -g @vue/cli

安裝完後我們就可以透過vue cli的建立起我們的專案

vue init webpack my-project

然後就會要你輸入一些東西 專案名阿 什麼的

幫方便的是他連webpack都自動幫你封裝好了
至於webapck有時間再來詳細說明
我們精美的範例就出來的

接下來我們把專案run起來吧
cd到我們的專案 然後輸入 npm run dev  就可以看到我們8080 port就有我們的vue基本畫面接下來就可以開心開發我們的vue 網頁了

 cd my-project
npm run dev

這是vue cli 最基本中的基本用法  , 未來在來分享些架構上的東西
有任何問題可以在底下留言