iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

菜鳥學前端,一起vue起來 !系列 第 6

Day 6.來建立第一個專案吧

我們先來創建一個資料夾來放我們的檔案們吧
首先打開我們的VSCode,一樣打開終端機(Ctrl + Shift + `),輸入cd /
https://ithelp.ithome.com.tw/upload/images/20210916/201314004GB0jBC33v.png

路徑就會跳到C槽,再輸入mkdir vueProject(在 C槽底下建立一個 vueProject 的資料夾)
https://ithelp.ithome.com.tw/upload/images/20210916/20131400piDyq6Meih.png

這時候打開我們電腦中的C槽,就會發現多了一個vueProject的資料夾!
(其實這跟我們到C槽右鍵新增資料夾再重新命名是一樣的效果歐,只是在終端機打指令看起來就比較酷o(`ω´ )o)
https://ithelp.ithome.com.tw/upload/images/20210916/201314001QI02O9hi6.png

新增一個html檔案
點選檔案開啟我們剛創建的資料夾vueProject,現在裡面還是什麼都沒有呢,我們來創建個新檔案吧!
(因為我們要先試著用引入vue的方式進行,所以先建立html的檔案,而不是直接創建vue的檔案)
點選新增檔案
https://ithelp.ithome.com.tw/upload/images/20210916/20131400fa4d877L4x.png

將它改名為index.html
https://ithelp.ithome.com.tw/upload/images/20210916/20131400Fm8R2n4UJg.png

現在裡面還沒有html的基本架構,但沒關係!我們打個驚嘆號!再按下enter
https://ithelp.ithome.com.tw/upload/images/20210916/20131400hb85Qi1jw0.png

登愣!跑出來了!
https://ithelp.ithome.com.tw/upload/images/20210916/20131400CoNCNREJvA.png

接著我們到Vue官網下載開發版本
https://ithelp.ithome.com.tw/upload/images/20210916/20131400ZwSHFZ5Jyr.png

將下載好的vue.js拉到我們剛創建好的資料夾
https://ithelp.ithome.com.tw/upload/images/20210916/20131400kxSKWhRHOZ.png

我們就會在VSCode裡面vue.js看到多了一個js檔
https://ithelp.ithome.com.tw/upload/images/20210916/201314008cqr77hjVo.png

我們打開網頁會發現裡面什麼都沒有,因為我們還沒寫東西進去,但按下F12點選Console會看到這兩段訊息,那就代表我們的Vue成功部屬進來了
https://ithelp.ithome.com.tw/upload/images/20210916/20131400rw2kPtMNgR.png


上一篇
Day 5. 怎麼開始Vue起來
下一篇
Day 7. 介紹一下VSCode-打code好幫手
系列文
菜鳥學前端,一起vue起來 !30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言