前端基礎開發環境安裝與配置

前言

　　前端的東西越來越多，換台電腦就忘要配置啥，現在工作中大部分開發還是用vue，基於vue的環境配置。

1. 安裝node環境
2. npm（修改淘寶鏡像）
3. 安裝webpack
4. 開發工具vscode或webstrom
5. 安裝vue-cli
6. 關於sass(ruby環境編譯sass, node-sass利用node編譯sass)
7. 安裝git
8. and其他工作學習過程中需要用到的

一、安裝node環境

　　１、官網下載：node官網地址　點擊下載安裝適應版本即可。

　　２、安裝完成后，可控制台輸入node -v 或node --version，查看node.js是否安裝好，安裝好則會有版本提示。

　　

 

注意：如果電腦是win7，直接進去官網點擊最新版本下載，會提示當前版本過高；

  Node.js is only supported on Windows 8.1, Windows Server 2012 R2, or higher. 

需要降級安裝低版本的，網上有說在v12.16.2以上版本就不在支持window7系統，不過我選擇的是v13.8.0也可以正確安裝；

（1）安裝好node以后，在nodejs文件夾下設置一下node_global和node_cache(node緩存文件夾)；

　在cmd 命令行中輸入：

npm config set prefix "D:\xxxxx\nodeJs\node_global"

 

npm config set cache "D:\xxxxxx\nodeJs\node_cache"

　一般對於npm的安裝分為本地安裝和全局安裝，如果是全局安裝就會指定安裝到node_global目錄；

　　如果沒有設置全局目錄node_global，那么全局安裝的文件將會保存到 C:\Users\xxxxx\AppData\Roaming\npm (xxxxx是自己設置的計算機名字)

（2）設置環境變量（切記，不要刪除原先的系統變量，只要用分號隔開，然后添加，最后也要加上分號）

用戶變量設置：將用戶變量中 PATH 的值改成 D:\Program Files\nodejs\node_global，沒有PATH，可以直接添加。

系統變量設置：添加變量 NODE_PATH  值為：D:\Program Files\nodejs\node_modules

關於node環境配置問題，通過用戶自己配置完整地環境變量，可以更好地運行進程；

環境變量（environment variables）一般是指在操作系統中用來指定操作系統運行環境的一些參數，是在操作系統中一個具有特定名字的對象，它包含了一個或者多個應用程序所將使用到的信息；當要求系統運行一個程序而沒有告訴它程序所在的完整路徑時，系統除了在當前目錄下面尋找此程序外，還應到path中指定的路徑去找。

二、npm（修改淘寶鏡像）

　　npm代表的是npmjs.org這個網站，這個站點存儲了很多nodejs的第三方功能包，利用npm這個工具可以將nodejs第三方功能包通過相關指令進行安裝，比如npm install webpack -g;只要安裝好了node，就自動安裝好了npm。有時候用npm安裝相關東西實在太慢，因此使用cnpm保存為淘寶鏡像，也可以直接將npm路徑修改為淘寶鏡像。詳見《‘cnpm' 不是內部或外部命令,也不是可運行的程序》

　　注（引用文章）： NPM 國內慢的問題解決

三、 安裝webpack

　　如果之前沒全局安裝過webpack，就先安裝一下。Vue 提供了一個官方的cli，為單頁面應用 (SPA) 快速搭建繁雜的腳手架，腳手架通過webpack搭建開發環境。

 

$ npm install webpack -g

四、開發工具vscode或webstrom

　　１、關於webstorm，從大學就開始用啊，這么多年了，在工作中慢慢轉向了vs，因為事先集成了很多東西，導致太吃內存了，還是說我的電腦太low了。害！代碼提示、語法高亮、集成插件，不需要做過多的配置，便可上手。

　　關於《webstorm(０)：下載安裝webstrom及激活》

　　２、關於vscode，下就完了，再根據公司規范配置一下格式啥的。

關於vscode插件

　　

Vue Extension Pack ：集成了Ｖｕｅ的所有常用插件；（已經包含了下面一些常用插件）
Vetur ：支持語法高亮、智能感知、Emmet等，包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化選中代碼，兩個Ctrl需要同時按着）
EsLint ： 語法糾錯
open in browser ： 如何用瀏覽器預覽運行html文件
Debugger for Chrome ：映射vscode上的斷點到chrome上，方便調試（配置有點麻煩）
Auto Close Tag ：自動閉合HTML/XML標簽
Auto Rename Tag ：自動完成另一側標簽的同步修改


JavaScript(ES6) code snippets —— ES6語法智能提示以及快速輸入，除js外還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時間
Path Intellisense ：自動路勁補全
HTML CSS Support ：讓 html 標簽上寫class 智能提示當前項目所支持的樣式
React-native 快捷鍵顯示-----react組件模板；例如：cccs
vue vscode snippets 快捷鍵顯示：vue組件模板；例如：vba

五、安裝vue-cli

　　在命令行里輸入：npm install vue-cli -g，安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如果出現相應的版本號，則說明安裝成功。

　　可能錯誤：

　　（１）在控制台顯示如下：

　　

 　　（２）或者vscode的終端顯示“vue : 無法將“vue”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫，如果包括路徑，請確保路徑正確， 然后再試一次。”

　　原因是沒有安裝vue-cli。

六、關於sass(ruby環境編譯sass, node-sass利用node編譯sass)

　　　我們可以使用 npm（NPM 使用介紹）來安裝 Sass

npm install -g sass

以及可能遇到的問題之《安裝 node-sass 的不成功》

七、安裝git

　　文章之《git(一):了解、學習、安裝git》

八、and其他工作學習過程中需要用到的

　　待續．．．．．．