2017年3月4日 星期六

[前端程式設計基礎]安裝開發環境

2017/3/4
  1. 上課要問五個問題，寫作業
  2. JavaScript和Node.js
    1. Node.js超級重要，讓編輯器可以掛平台．是javascript的執行器．原本javascript只能在瀏覽器執行．
    2. Node.讓後端的程式，可以用javascript來執行．可以用js的語法呼叫伺服器的檔案．可以當伺服器端的程式語言．
  3. 安裝開發環境
    1. 申請Github帳號
    2. 安裝Git
    3. 安裝node
    4. 安裝Visual Studio Code
    5. 安裝VSCode常用套件
    6. 基本操作說明
  4. 自己架在公司的環境，用gitlib
  5. 建立第一個Repo: JS280-Lecture01-Examples
    1. 指令

  1. 安裝git
    1. git不等於github，github是基於git所開發出來的雲端服務．
    2. github用於協作．
    3. 其實每個人的本機，可做單機版的版本控制，用git足以．
    4. 無論Windows或macOS
    5. 都可以到Git官網下載安裝包
    6. 版本庫是存版本點，而不是存檔用，要存檔可存在雲端．
  2. macOS 先裝Homebrew,再透過brew install git
    1. MacOS當初設計給筆電，缺少開發用的版本控制，故要安裝homebrew
    2. 在終端機游標中 打指令安裝homebrew
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    1. 在終端機游標中 打指令安裝git
$ brew install git
    1. 安裝後測試Git
      1. Ｗindows: PowerShell
      2. macOS: terminal
      3. 測試git
        1. $ git --version
        2. 看看是否出現版本號
  1. 使用Windows PowerShell，會比命令提示字元有更多東西，可以同時執行windows和Linux指令．
  2. Git 基本設定
    1. 設定使用者名稱與信箱
      1. $ git config --global user.name "你的github帳號"
      2. $ git config --global user.email "你的github註冊信箱"
    2. 為輸出著色
      1. $ git config --global color.ui true
    3. 本機端repo設定兩種方式
      1. 遠端先建立repo，本機clone
      2. 本機先建立repo，遠端後建立，則本機 remote add
    4. 第一種
      1. 遠端先建立repo，本機clone
切換在你想要儲存的地方
cd 切換目錄
.. 回到上一層
$ git clone https://github.com/你的帳號/你的repo名稱
    1. 第二種
      1. 本端先建立repo，再加入遠端

      
      1. 要上傳時下指令
        git push -u origin master
    1. push 時需要輸入帳密
      1. 打密碼時：游標不會移動，請不要慌張 打就對了
    2. push 成功後，未來就是 寫程式寫到段落
      1. git add .
      2. git commit -m "提交原因"
      3. git push origin master
    3. 刪除git
      1. rm -rf .git
      2. 即有破壞力的指令
  1. 在windows的終端，Xshell很好用，有時windows終端機看SQL是亂碼，用這個可以執行．個人使用免錢．
  2. 其他參考資料
    2. Git 版本控制系統 https://ihower.tw/git/

  1. 安裝VSCode
    1. 經過一年的蛻變，VSCode已是超強的編輯器．放棄Sublime跟Brackets吧．
    2. 基礎在github上的electron．寫html就能跨平台．
        1. Visual Studio Code（VS Code）是一個由微軟開發的，同時支援Windows、Linux和OS X作業系統的開源文字編輯器。[2]它支援偵錯（偵錯功能僅限於 ASP.NET 和 Node.js 專案），內建了Git 版本控制功能，同時也具有開發環境功能，例如代碼補全（類似於 IntelliSense）、代碼片段等。該編輯器支援用戶自訂配置，例如改變主題顏色、鍵盤捷徑、編輯器屬性和其他參數。
    3. Why VSCode???
      1. 套件已經超多
      2. 可以自訂跟Sublime一樣的快速鍵
      3. 內建Git整合
      4. 強大的自動提示
      5. 強大的除錯功能
  1. 安裝Node
    1. 無論Windows或macOS，都到node官網下載安裝包
      1. LTS長期維護版，在某些期限內node會修復，不會改動．不會導致某些js語法不能用．

    2. macOS可用homebrew安裝
    3. npm是node的套件管理器（還有比NPM更快！Facebook開源JavaScript套件管理工具YARN
      https://www.bnext.com.tw/article/41366/facebook-open-source-javascript-package-manager-yarn
    4. 安裝第一個套件n node的版本切換器


      2. stable
    5. 安裝第二個套件，jshint  JavaScript語法偵測提示
  2. VSCode必裝套件
    1. 套件管理器
    2. 必裝外掛
      1. Settings Sync
        1. 不管安裝什麼東西，都上傳到github，回到家後，可以同步雲端，再讓這些安裝與設定，傳到不同電腦．（同步做得不夠好，建議用手動）
        2. 產生金鑰


        3. 輸入自己的key
        4. 下載老師的gist id   (不能用於上傳)  
馬上就有老師的東西
再重新載入
        1. 重設token
          1. Reset Token / Gist Settings
Type ">Sync" In Command Palette and select Reset Token and Gist Settings

          1. 或是到設定中去看，直接改"sync.gist": ""
        1. 上傳本機的安裝到cloudSettings
          1. shift+alt+u
      1. Git History
      2. Sublime Text Keymap
      3. Path Intellisense
      4. HTML CSS Class Completion
      5. jshint
    1. 其他常用
      1. HTML Snippets
      2. Bootstrap 3 Snippets
      3. jQuery Code Snippets
      4. Vue 2 Snippets
      5. Angular 2+ Snippets
      6. Angular 2 TypeScript Emmet
  1. 指令列
    1. 按command+shif+p叫出指令列
    2. Ctrl+`會叫出終端機，還可以開不只一個終端機

    3. Git提交
      1. 有變更的話，git旁邊會出現數字
      2. 點選加號後，輸入註解，再打勾
    4. 推送至雲端
    5. 成功提交
  2. 作業要拍影片，上傳到社團．
    1. 每個活動都要參加
      1. 來源點加號
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)