前端小菜鳥的 windows 開發配置

• 因不可抗力致使的 windows 開發配置需求

• cmd

  • win10 cmd 不自動加管理員權限，需右鍵選擇以管理員身份運行（node 安裝過程報權限錯誤的緣由，operation not permitted）

  • cmd 默認在C盤，進入D盤輸入命令 d:

  • cmd 如何進入桌面目錄，在桌面 shift+右鍵 選擇 在此處打開命令窗口

  • shift+ 右鍵文件夾 可選擇複製爲路徑，獲取文件的冗長路徑

• git bash

  • 能夠在文件目錄右鍵選擇 git bash here

• nodejs && npm

  • 在 cmd 安裝比較好。。 bash運行命令好像有問題

  • 安裝 nodejs 自帶的npm 可能不是最新版本，可能會致使運行錯誤，升級 npm 到最新版，npm install npm -g

  • 官網下載 && install

  • node -v npm -v

  • 配置 npm 全局模塊的存放路徑和 cache 路徑 在C:Program Filesnodejs下 建立 node_global 和 node_cache 兩個文件夾

  • cmd 輸入

  npm config set prefix "C:\Program Files\nodejs\node_global"
  npm config set cache "C:\Program Files\nodejs\node_cache"

  • cmd 運行 npm install express -g 檢查是否能夠安裝成功，並檢查 "C:Program Filesnodejsnode_globalnode_modules" 內是否有 express 模塊

  • 個人電腦-系統屬性-高級-環境變量，系統變量新建"NODE_PATH":」C:Program Filesnodejsnode_globalnode_modules「
    用戶變量"PATH"添加 「C:Program Filesnodejsnode_global」

  • 以上！

  • 推薦教程

• mongoDB 安裝

  • 官網下載 mongoDB && install

  • 建立數據庫文件存放位置 C:Program FilesMongoDBServer3.4datadb

  • cmd 打開 C:Program FilesMongoDBServer3.4bin 運行 $ mongod --dbpath "C:\Program Files\MongoDB\Server\3.4\data" 啓動 mongodb 服務，注意帶引號。mongoDb 默認鏈接端口 27017，若以上運行成功，打開http://localhost:27017顯示It looks like you are trying to access MongoDB over HTTP on the native driver port. 則鏈接成功

  • 在 C:Program FilesMongoDBServer3.4data 下新建文件夾 log 存放日誌文件，並在 log 目錄下新建文件 mongo.log

  • 在 C:Program FilesMongoDBServer3.4 新建文件 mongo.config, vi mongo.config 輸入

  dbpath=C:\Program Files\MongoDB\Server\3.4\data\db
  logpath=C:\Program Files\MongoDB\Server\3.4\data\log\mongo.log

  • 以管理員身份打開 cmd 運行命令 $ mongod --config C:\Program Files\MongoDB\Server\3.4\mongo.config --install --serviceName "MongoDB"，結果存放在log 中，查看 log/mongo.log顯示是否成功，若失敗多是未用管理員身份運行，解決方法見第一條

  • 而後在 cmd 裏C:Program FilesMongoDBServer3.4bin 運行 $ net start MongoDB，啓動mongoDB服務！

  • 或在 cmd 裏運行 services.msc 查看服務，點擊 MongoDB 啓動

  • 完整教程

• sublime text3

  • 首先安裝 package control，方法看 sublime 官網，ctrl+` 調出 console 面板運行一段代碼便可

  • shift+ctrl+p 調出命令面板

  • 在命令面板 中輸入 install package 安裝插件

  • 在命令面板 中輸入 list package 查看已安裝插件

  • 在命令面板 中輸入 remove package 回車選擇要刪除的插件

  • 或 preferences-package control

  • sublime 開啓 vim，preferences-settings-user，輸入

  {
    "ignored_packages":
    [
        "Toggle Css Format"
    ]
  }

  • 必備插件 Emmet、Alignment、JsFormat、markdownEditing、markdown Preview、Vue Syntax Highlight(vue 文件高亮，不能高亮則直接在 package control 中輸入vue 點擊第一條 set syntax: vue component) 、less

    • 講解一下 markdown preview 的配置，preferences-package setting-markdown preview-user，輸入

    {
     "parser": "github",
     "build_action": "browser",
     "enable_mathjax": true,
     "enable_uml": true,
     "enable_highlight": true,
     "enable_pygments": true,
     "enabled_extensions": "github",
     "enabled_parsers": ["github"],
     "github_mode": "markdown",
     "github_inject_header_ids": true,
     "enable_autoreload": false
    }

    • 設置渲染樣式是 github， 渲染結束後用瀏覽器打開，開啓 mathjax uml pygments 等支持。 "github_inject_header_ids": true 保證 heading 的 id 和 heading 內容一致，能錨點定位。

    • 快捷鍵 shift+ctrl+b，自動打開瀏覽器查看渲染後的markdown 文本

• 超詳細的 sublime 插件配置

• 給以上寫出優秀技術文章的做者點贊