VsCode+Node的前端環境搭建及其理解並建立一個前端目錄

既然選擇了遠方，便只顧風雨兼程 __ HANS許

系列：零基礎搭建先後端分離項目

 

• • • • • 系列：零基礎搭建先後端分離項目
        • VsCode
          • VsCode的安裝
          • VSCode中文設置
          • VsCode 擴展
          • VsCode Debug
          • VsCode快捷方式
        • NodeJs與NPM
          • NodeJs
          • NPM
        • 前端項目
          • Express

 

VsCode

Visual Studio Code（如下簡稱vscode）是一個輕量且強大的代碼編輯器，支持Windows，OS X和Linux。內置JavaScript、TypeScript和Node.js支持，並且擁有豐富的插件生態系統，可經過安裝插件來支持C++、C#、Python、PHP等其餘語言。

• VsCode的安裝

  vscode就是個軟件。看到該篇文章的確定有安裝過軟件，就給你一些下載地址，下載完安裝便可。默認安裝的是C盤，你能夠更改安裝盤。
  ps：使用教程wiki
  

• VSCode中文設置

  正常狀況下，vscode是英文的，那我們是中國人，對中文比較熟悉，固然要是你是4 6 級英語大神，你就忽略了。

  1. 使用快捷鍵組合【Ctrl+Shift+p】，在搜索框中輸入「configure display language」，點擊肯定後；
  2. 修改locale.json文件下的屬性「locale」爲「zh-CN」;
     
     
  3. 重啓編輯器，若是重啓後vscode菜單等仍然是英文顯示，在商店查看已安裝的插件，把中文插件從新安裝一遍（以下圖），而後在重啓工具。
     
• VsCode 擴展

  • vscode其實就是披着編譯器的編輯器。不少功能能夠去商店下載擴展的使用，下面給出個實用擴展的介紹連接，你們能夠各取所需：http://www.cnblogs.com/zhangycun/p/9529623.html
• VsCode Debug

  安裝擴展，添加調試配置，F5調試
  

  • C#
    安裝擴展「C#」,添加調試配置文件，進行調試
    1. 安裝擴展
    2. 使用命令建立項目
    3. 運行項目
    4. 安裝調試包
    5. 調試程序
  • Chrome
    安裝擴展「Debugger for Chrome」就進行chrome調試，跟chrome的開發者工具同樣的效果
    更爲詳細地址： http://www.javashuo.com/article/p-qarorhaz-gu.html
    1. 安裝擴展 )
    2. 編寫html
    3. 開始調試
• VsCode快捷方式

  已經有牛人寫好了：http://www.javashuo.com/article/p-asxbdymu-gq.html

NodeJs與NPM

• NodeJs

  • NodeJs安裝
    菜鳥教程已經給咱們說明的很清楚了，按照教程選擇咱們的電腦系統安裝教程進行安裝便可，安裝完後即可在終端查詢版本號。教程連接：http://www.runoob.com/nodejs/nodejs-install-setup.html
    

  • 簡單命令
    Node.js REPL(Read Eval Print Loop:交互式解釋器) 表示一個電腦的環境，相似 Window 系統的終端或 Unix/Linux shell，咱們能夠在終端中輸入命令，並接收系統的響應。

  命令	描述
  Node -v	查看版本號
  Node	進入Node交互模式
  Node *.js	運行某個Js實例
  ctrl + c	退出當前終端
  ctrl + c 按下兩次	退出 Node REPL
  ctrl + d	退出 Node REPL.
  向上/向下 鍵	查看輸入的歷史命令
  tab 鍵	列出當前命令
  .help	列出使用命令
  .break	退出多行表達式
  .clear	退出多行表達式
  .save filename	保存當前的 Node REPL 會話到指定文件
  .load filename	載入當前 Node REPL 會話的文件內容
  cls（前提是已經退出node環境）	清屏

• 建立第一個應用
  

• NPM

  • NPM安裝

    • 因爲新版的nodejs已經集成了npm，因此以前npm也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝。命令以下，出現版本提示表示安裝成功:
      
    • 如須要升級，windows在cmd中命令「npm install npm -g」，linux在運行命令「$ sudo npm install npm -g」

  • 簡單命令

  命令	描述
  npm install express -g	安裝模塊（-g表明是全局，也就是在你電腦安裝，若沒有隻會在你項目安裝）
  var express = require('express');	安裝好以後，express 包就放在了工程目錄下的 node_modules 目錄中，所以在代碼中只須要經過 require('express') 的方式就好，無需指定第三方包路徑。
  npm list -g	你可使用如下命令來查看全部全局安裝的模塊：
  npm list express	查看某個模塊的版本號
  npm uninstall express	卸載 Node.js 模塊
  npm ls	卸載後，你能夠到 /node_modules/ 目錄下查看包是否還存在，或者使用如下命令查看
  npm update express	更新模塊
  npm search express	搜索模塊
  npm init	建立模塊
  npm publish	發佈模塊

  • 使用淘寶鏡像
    因爲npm的服務器在牆外，因此咱們使用淘寶的鏡像
    使用命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
    這樣就可使用 cnpm 命令來安裝模塊了：
    cnpm與npm的命令差很少，基本都有。

前端項目

Express

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各類 Web 應用，和豐富的 HTTP 工具。使用 Express 能夠快速地搭建一個完整功能的網站。

1. 安裝express npm install express -g
2. 安裝express應用生成器 npm install express-generator -g
3. 打開vsCode的調試控制檯裏面的終端，輸入命令express myexpress
4. cd myexpress 進入項目目錄
5. npm install安裝Node_moudule包
6. npm start啓動項目
7. 或者在vsCode打開MyNode這個文件夾使用F5就能夠直接調試了或而後在瀏覽器輸入http://localhost:3000/

 

enter description here