2017/12/27

第八天:安裝 Rails 和認識小黑框( 2018 iT邦幫忙鐵人賽-只要有心,人人都可以作卡米狗 )

markdown 今天會安裝 Rails,由於架網站需要用到大量的小黑框,所以今天主要會介紹小黑框。 # 安裝 Rails 先打開小黑框,忘記怎麼打開小黑框了嗎?按一下 `Windows`+`R` 叫出執行,並輸入 `cmd` 然後按`確定`。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVdGuruLMYqV7BzX2j0DqvUbwG-4o6n7z3ZvbKlhjF4u22KURso-sPOzU7jthp67Lv1AvsfW57QOvIlRIjUORmg1yNR3ttDXfwcLBq-H6zAnGZcKdblc1BMKoqYSj7yULHDITgI2s4P2Y/s1600/1.jpg) 輸入 `gem install rails` 然後按 `Enter`。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WrEDaT10U3NYQDQ4MkQnpao2VmCe9cQHmq3tecubw7kGSZp2BuYtduf1D5uZbNsYg-EH6TtmXBKSBj8hRj-zuP6xyoyjORKUKP6eLmahvQw7ESIPj0Z1tkQcanIto4AkaMtE1LuSyFI/s1600/1.jpg) ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIDHc7iskpXVt4nM2MRODNhgv0YlVAEll_22OjNoHVDx7CU7XXZEX4NBbs3XNVPmsuqMAi6B_-LEXLk3TzKknhTeJJ8y2yvx9aC1kbIkyGrLON_8hZ7B1zv-ONBOGTDL2MDx5FBDhPt58/s1600/2.jpg) 然後就裝好了~! 可以輸入 `rails -v` 檢查是否正確安裝 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggHTUrOfNJyWcmc3Yo2mDW6TuqUugNEcnIEKht2Cm_Ce9MxvwU9Xr1B9M-mi73px5ulodhACcMGGEy_XtG9ZYeCjv4pWV-c2kkW1wKPGF-WOQlD5KG-S5sRT3xTmLNPMSF0h571EH0EU8/s1600/3.jpg) 如果你在這裡失敗的話,請在本文底下留言並附上失敗畫面。 你有注意到嗎?有時候我們安裝軟體的方式是用安裝精靈,安裝精靈就是`下一步`、`下一步`、`下一步`、`完成`的那種。但有時候安裝軟體的方法是開啟小黑框然後輸入一段文字,接下來就自動下載和安裝了。接下來我們會用到更多的小黑框,所以我想先介紹一下關於小黑框的事情。 # 認識小黑框 小黑框的正式名稱叫做命令提示字元,當我們執行 cmd.exe 時就會顯示這個。 ### 尋找小黑框 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3-rkBi2K7xNjytDDDVTvSh1cTo3Ncr6dDile9E9-ADcPnmIR6z1F3tJvfpO2Ytf9qNclwa_q3nGlfl5dikFfsPBGmESxqBBihnt64jJdaGT9FxssvWCvvDBwMDeVSEIjhXqgHaUlpFo/s1600/3.jpg) 紅框框告訴你 cmd.exe 是放在哪,那我們就用檔案總管去看一下是不是真的在 `C:\WINDOWS\system32\` 資料夾下有 `cmd.exe`。 按下 `Windows`+`E` 開啟檔案總管。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyrI0jQpn05CCmjjYWc26Gy0pKDwJyX6PpaWzk_ysHhIwHcFEVbvJy8-2Horvdn9LxMoA2DyxzvalW4uIaUip5Nen-UmdnKFVjCqntl708KyCVMT88y8emhfWnVSTvqYyz7kHhlG6YlU/s1600/4.jpg) 其實檔案總管跟瀏覽器還蠻像的,都可以直接在網址列上面輸入路徑,我們先點一下網址列。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsBGZnlrGzKV2vaIDz34e41CI-Xl56a3bQceCayI4Yp0g7AmD_EAP66tdm1yfOOuMroXXptHmEvHTf35yxxg_Y6LqEyGljIg-ArF7KwMWT4L33wkD2PREkCV_eSD71jD0GPAMOHXxlZ50/s1600/5.jpg) 然後輸入 `C:\WINDOWS\system32\`。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPq5hWKSN6-qfYGuBFq_2Ge6zNZn58ZvrRBPqxRugiv5iA1J8Wj5UiwNQAG_R_i4-jkfxZw9b4VOi9dyEUlI-j1fWjAZyTGUsypYdkvrzV0ws6Tc4_gDktK7Mz5OE1QckmH7UK3eEvUJo/s1600/6.jpg) 然後按下 `Enter`,就能直接抵達目標資料夾了。這裡檔案數量很多,要仔細找找。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhymlSGCi0ItpJaSNeBpod4Yqksu-WX685e6194JOxEJGaxLVOw-utVxgeN-ILFTpyiL3gbznFnKOmfCphWETtBNI-fFV5S3yfYd2lpa22B5oHHz6F0ts4Bk34H3oNDqn4M3JaNT_PCEI0/s1600/7.jpg) 找到囉!點兩下打開看看是不是真的小黑框。 ### 小黑框其實是檔案總管 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3-rkBi2K7xNjytDDDVTvSh1cTo3Ncr6dDile9E9-ADcPnmIR6z1F3tJvfpO2Ytf9qNclwa_q3nGlfl5dikFfsPBGmESxqBBihnt64jJdaGT9FxssvWCvvDBwMDeVSEIjhXqgHaUlpFo/s1600/3.jpg) 現在我們來看藍框框代表什麼意思,藍框框指的是目前的所在位置。 我們用一樣的方法,從檔案總管過去看看,我們把左邊藍框框的內容(在我的電腦上是 `C:\Users\ETREX` 你的可能是別的)填到檔案總管的網址列上然後按 `Enter`。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkoR1HGskjSayhEvCN7aXoQpEa-0dqE_B8Jm_s_3jD1yVwa1VjConOcXAKqFFJCFiYVROYKwhrP2S_TPsGzsKl0pK8yUUXr1raNpxgWLlrY_KvpdfGQwTqRP8TeCLeu0onrBfZcVac0fs/s1600/8.jpg) 我把小黑框放左邊,檔案總管放右邊,讓你看兩個有多像。 現在我們在左邊的小黑框輸入 `dir` ,`dir` 是 directory(目錄)的意思,他會列出在目前位置下的所有資料夾和檔案。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimbhel-szysndwsKhsiLNV30bgHKJRZrsueLqvsN7wmZNGytWmYgbzdK85bG6iYPqZgzx-kPaDUeIK4IO8dElXaTlCOdyzuL2gGfCq7pZGFM0stt5k2qxRz0RNZPocit5ImgviHDTchB8/s1600/9.jpg) 但是他太長了,只能看到最後面。這次我們輸入 `dir /w` ,這個指令可以讓他看起來跟右邊比較像。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMV7oCDk77782AGOUyCEzI24avG71dFg1z41qOyXE0wPuYH6zOKu4FOMvUht_MhN1ws6gUHKIUNdHACB5G6CsvgyHp5Fbm01yF_Pf6ys5gOoA4EMesm-_kJf7IE7E0pBp8Mi4Q0Lx_blw/s1600/10.jpg) 看起來有沒有很像!! 我們可以在檔案總管這邊新增一個資料夾叫作「只要有心,人人都可以作卡米狗」,然後再回到左邊重新輸入一次 `dir /w` ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITQIHzhjRFkCGc0cVloTbmBbbJO5KWMiEWO5yRoce6roXLIv3kV4F2xiJ7ZnY2Zx3MRQw6erzm2lXTMXjy25_nnItTW2wA9Ifd_Wij9KJX5le_uUdlVotQ1ARHHvo3vCwxyMLskJGLLY/s1600/11.jpg) 現在你可以完全理解小黑框其實就是檔案總管,小黑框的藍框框就是檔案總管的網址列,代表目前所在資料夾。 ### 切換資料夾 在小黑框不能用滑鼠,所以所有的操作都是透過指令,像我們輸入 `dir` 就會顯示目前所在資料夾下的資料夾和檔案,所以我們如果想要切換資料夾,也要輸入指令。切換資料夾的指令是 `cd`,意思是 change directory(切換目錄)。 舉例來說,我們在檔案總管想進入剛剛建立好的資料夾「只要有心,人人都可以作卡米狗」,就是點兩下滑鼠就好。那麼在小黑框則是輸入`cd 只要有心,人人都可以作卡米狗`,請注意 `cd` 和 `只要有心,人人都可以作卡米狗`的中間需要一個空白鍵。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwKiwZrTcuQSx7zwVq_I9HU7rPryrRpNc10JCqhL170QUWnO478GfW9ZQXdJ8o3gkB6iHW4bhmmL9vmeQrcX00UBEPFroYloKyQ5pd7sni7sjG9OcI5RwhKz0bxOXxIOH4R0Y8RKW1T3s/s1600/13.jpg) 進入資料夾後必須重新輸入 `dir` 才能看見資料夾的內容。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXY6L911u4koIpZhFJBvfStHe-0n2VTKqFREFgur7Y4ncaGDNcV1GawulKvI74UHeTeiam8znBXRxwjDq1d2HaasYnk3mi_8Iojk04pnCdVA2a4Cr-yVns8SgH9Loj-LKCOHUell_vpek/s1600/14.jpg) 在這裡看見左邊有兩個資料夾,一個叫 `.`,另一個叫 `..`,但是右邊卻什麼都沒看到。其實 `.` 代表的是目前資料夾,而 `..` 代表的是上一層資料夾。意思是如果我們想回到上一層,可以輸入 `cd ..`。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxuh-6OZA8QU1fu1KiyHs74dWzfDfAR3dMGP2xshcw1bgPqAtigW0dVyeuAV5fDHqDiaxYbj7VAyajZkLeYo7jm_M5GIQAX49NeWriNxVASzfSLaAoT41ybUiYl3q_y4lGDUIUeF3fAr8/s1600/15.jpg) ### 切換硬碟 不知為何,`cd` 指令不能拿來切換硬碟。試著輸入 `cd D:` 卻發現停留在原地。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirrzo7VSvo0N5dCry_-iWKAV6cn2lie8TlUOZyEfJ8wqoPie-eaLHS4NK4TQkOxgsyxyRraepP67G6nXUFIdjKIAhDAzsJ7ZRDAccyqeBvjNAfbJ5sUeuLVb8uoQvhequdMEN1DQJmGUQ/s1600/16.jpg) 其實切換硬碟的方式是直接輸入 `D:` 就可以了。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSUTaoggFbZ1ObY5GNgeqeePHGtcG3IIYW6pYJy7VWBwSzKrtkxEh82RcNj7QCARVPzyO1rhJcVYbOqWEKBhO3a69dOh4dkv_3jRrsHEUs3b8V6sblpDd8V7sG6ARErQQnFK_npthHeSM/s1600/17.jpg) ### 快速地開啟一個小黑框在指定的目錄下 其實在檔案總管的網址列輸入 cmd 也可以叫出小黑框,而且這個小黑框會直接幫你切換到和檔案總管一樣的目錄。 像這樣: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUcprWmcFIW2_GixnpbayL7KI5bsHzZgop-LiEmMaMDlBbIMI8UN99THQDbQHn2lOFuRZZVGyDa4g7d-k-KOJM5OTQvI9sggWDPIyKXFKE7CKDoV1H6Mr-t8lmKp1QFnWzKP6b3LGqBg4/s1600/18.jpg) 按下 `Enter` 後就會跳出小黑框了。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQrDBHLCyeyPiELhydbh72U0OoeVU3exu6nWlXw9-F3aTFTdxPuPbArgIJuvqDR_gvAnmVB0WjERMXn3qr9qOblIBIYgQL5U2uAtXVyxS-qbfCK4pYAAsIUQkFQfLZ5fwl3twzbnMXLDo/s1600/19.jpg) 今天就學到這裡,明天我們就要作網站了。

沒有留言: