一：Node.js

Node.js 不是一門編程語言，它是一個執行 JavaScript 代碼的工具，工具是指可以安裝在計算機作業系統之上的軟體，

為什么瀏覽器和 Node.js 都可以運行 JavaScript

因為瀏覽器和 Node.js 都內置了 JavaScript V8 Engine，

它可以將 JavaScript 代碼編譯為計算機能夠識別的機器碼，

JavaScript 運行在瀏覽器中控制的是瀏覽器視窗和 DOM 檔案，

JavaScript 運行在 Node.js 中控制的作業系統級別的內容，

1、瀏覽器中運行的 JavaScript 和 Node.js 中運行的 JavaScript 區別

在內置了 JavaScript V8 Engine 以后實際上只能執行 ECMAScript，就是語言中的語法部分，

瀏覽器為了能夠讓 JavaScript 操作瀏覽器視窗以及 HTML 檔案，所以在 JavaScript V8 Engine 中添加了控制它們的 API, 就是 DOM 和 BOM. 所以 JavaScript 在瀏覽器中運行時是可以控制瀏覽器視窗物件和DOM檔案物件的，

和瀏覽器不同，在 Node.js 中是沒有 DOM 和 BOM 的，所以在 Node.js 中不能執行和它們相關的代碼，比如 window.alert() 或者document.getElementById()，DOM 和 DOM 是瀏覽器環境中特有的，在 Node.js 中，作者向其中添加了很多系統級別的 API，比如對作業系統中的檔案和檔案夾進行操作，獲取作業系統資訊，比如系統記憶體總量是多少，系統臨時目錄在哪，對系統的行程進行操作等等，

2、為什么瀏覽器中的 JavaScript 不能控制系統級別的 API ?

瀏覽器是運行在用戶的作業系統中的，如果能控控制系統級別的 API 就會存在安全問題，

Node.js 是運行在遠程的服務器中的，訪問的是服務器系統 API，不存在這方面的安全問題，

3、Node.js 能夠做什么？

我們通常使用它來構建服務器端應用和創建前端工程化工具，

JavaScript 運行在瀏覽器中我們就叫它客戶端 JavaScript，

JavaScript 運行在 Node.js 中我們就叫它服務器端 JavaScript，

二：NPM包管理器

1、npm簡介

NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模塊生態系統，里面所有的模塊都是開源免費的；也是Node.js的包管理工具，相當于前端的Maven ，

2、使用npm管理專案

1、專案的初始化

npm init

#按照提示輸入相關資訊，如果是用默認值則直接回車即可，
#name: 專案名稱
#version: 專案版本號
#description: 專案描述
#keywords: {Array}關鍵詞，便于用戶搜索到我們的專案

#最后會生成package.json檔案，這個是包的組態檔，
相當于maven的pom.xml
#我們之后也可以根據需要進行修改，

2、修改npm鏡像

NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個網站在國內速度很慢，
推薦使用淘寶 NPM 鏡像 http://npm.taobao.org/ ，淘寶 NPM 鏡像是一個完整 npmjs.com 鏡像，同步頻率目前為 10分鐘一次，以保證盡量與官方服務同步，

#設定鏡像地址：
npm config set registry https://registry.npm.taobao.org 

#查看npm配置資訊
npm config list

3、npm install命令

1.基本命令

#使用 npm install 會安裝依賴包的最新版，
#模塊安裝的位置：專案目錄  \node_modules
#同時package.json 檔案中，依賴包會被添加到dependencies節點下，
類似maven中的 <dependencies>
#默認引數：--save  簡寫  -S  將當前依賴保存在dependencies節點下
npm install jquery

2.下載特定版本的依賴

#如果安裝時想指定特定的版本
npm install jquery@2.1.x

3.下載開發依賴

#devDependencies節點：開發時的依賴包，專案打包到生產環境的
時候不包含的依賴
#使用 -D引數將依賴添加到devDependencies節點
npm install --save-dev eslint
#或簡寫
npm i -D eslint

4.下載全域依賴

#全域安裝
#Node.js全域安裝的npm包和工具的位置：
用戶目錄\AppData\Roaming\npm\node_modules

#一些命令列工具常使用全域安裝的方式
npm install --global webpack
#或簡寫
npm install -g webpack

5.根據依賴下載安裝包

#npm管理的專案在備份和傳輸的時候一般不攜帶node_modules檔案夾
#安裝會自動在專案目錄下添加 package-lock.json檔案，
這個檔案幫助鎖定安裝包的版本

npm install      #根據package.json中的配置下載依賴，初始化專案

6.其他命令

#更新包（更新到最新版本）
npm update 包名
#全域更新
npm update -g 包名
#卸載包
npm uninstall 包名
#全域卸載
npm uninstall -g 包名

三：Webpack

1、Webpack簡介

Webpack 是一個前端資源加載/打包工具，它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源，

從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的請求，

2、Webpack

1、全域安裝

npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli

2、JS打包

創建組態檔webpack.config.js
以下配置的意思是：
①讀取當前專案目錄下src檔案夾中的main.js（入口檔案）內容，分析資源依賴，把相關的js檔案打包
②打包后的檔案放入當前目錄的dist檔案夾下
③打包后的js檔案名為bundle.js

constpath=require("path") //Node.js內置模塊
module.exports= {
    entry: './src/main.js', //配置入口檔案
    output: {
      //輸出路徑，__dirname：當前檔案所在路徑
      path: path.resolve(__dirname, './dist'), 
      filename: 'bundle.js'//輸出檔案
    }
}

3、執行編譯命令

webpack --mode=development
#執行后查看bundle.js 里面包含了上面兩個js檔案的內容并進行了代碼打包


也可以配置專案的npm運行命令，修改package.json檔案
"scripts": {
    //...,
    "dev": "webpack --mode=development",
    "prod": "webpack --mode=production"
}

運行npm命令執行打包，啟動專案
npm run dev #開發打包
或
npm run prod #生產打包

四：前端框架介紹

vue-element-admin 是一個后臺前端解決方案，它基于 vue 和 element-ui實作，它使用了最新的前端技術堆疊，內置了 i18n 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后臺產品原型，相信不管你的需求是什么，本專案都能幫助到你，

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

1、目錄結構

2、關鍵檔案

1、build/webpack.dev.conf.js

webpack組態檔，包含專案在開發環境打包和運行的相關配置
webpack.dev.conf.js 中參考了 webpack.base.conf.js
webpack.base.conf.js 中定義了專案打包的入口檔案


在HtmlWebpackPlugin配置html模板，生成的js就會自動插入到模板中，如下面的配置，
因此生成的js檔案會被自動插入到名為index.html的頁面中

2、index.html

專案默認的html頁面

3、src/main.js

專案js入口檔案，專案的所有前端功能都在這個檔案中引入和定義，并初始化全域的Vue物件

4、config/dev.env.js

定義全域常量值

因此，在專案中的任意位置可以直接使用 process.env.BASE_API 常量表示后端介面的主機地址

5、src/utils/request.js

引入axios模塊，定義全域的axios實體，并匯出模塊

6、src/api/login.js