我之前寫前端的時(shí)候就三個(gè)技術(shù)(html鹰服、js、css)颜武，現(xiàn)在的前端技術(shù)一般使用vue.js+element-ui, 一個(gè)后端程序員感覺(jué)再看現(xiàn)在的前端完全看不懂吉懊，js語(yǔ)法也不認(rèn)識(shí)了，css語(yǔ)法也不認(rèn)識(shí)了鼻疮，html中也出現(xiàn)了不認(rèn)識(shí)的標(biāo)簽怯伊。為了弄懂現(xiàn)在的前端是怎么玩的就研究了一下，本文是一個(gè)后端服務(wù)器碼農(nóng)對(duì)現(xiàn)在的大前端技術(shù)的掃盲判沟，因不是專業(yè)前端耿芹，不保證所寫的都是正確的，如有錯(cuò)誤請(qǐng)指出挪哄。

一：Vue.js技術(shù)棧

npm：node.js的包管理工具吧秕，用于同一管理我們前端項(xiàng)目中需要用到的包、插件迹炼、工具砸彬、命令等，便于開發(fā)和維護(hù)斯入。

ES6：Javascript的新版本砂碉，ECMAScript6的簡(jiǎn)稱。利用ES6我們可以簡(jiǎn)化我們的JS代碼刻两，同時(shí)利用其提供的強(qiáng)大功能來(lái)快速實(shí)現(xiàn)JS邏輯增蹭。

Babel：一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件

vue-cli：Vue的腳手架工具，用于自動(dòng)生成Vue項(xiàng)目的目錄及文件磅摹。

vue-router： Vue提供的前端路由工具滋迈，利用其我們實(shí)現(xiàn)頁(yè)面的路由控制，局部刷新及按需加載户誓，構(gòu)建單頁(yè)應(yīng)用杀怠，實(shí)現(xiàn)前后端分離。

vuex：Vue提供的狀態(tài)管理工具厅克，用于同一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用，存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象橙依。

webpack：一款強(qiáng)大的文件打包工具证舟，可以將我們的前端項(xiàng)目文件同一打包壓縮至js中硕旗，并且可以通過(guò)vue-loader等加載器實(shí)現(xiàn)語(yǔ)法轉(zhuǎn)化與加載。

二：node.js

1. 簡(jiǎn)介

我們知道javascript代碼只能在瀏覽器上運(yùn)行女责，只有瀏覽器能夠解析js代碼漆枚，如果想要javascript代碼能夠在服務(wù)器端運(yùn)行就必須提供一個(gè)Javascript的運(yùn)行環(huán)境(runtime environment)，這就是node.js抵知。

node.js是對(duì)Chrome V8引擎進(jìn)行了封裝墙基，是一個(gè)能讓JavaScript運(yùn)行在服務(wù)端的開發(fā)平臺(tái)，它讓JavaScript成為與PHP刷喜、Python残制、Perl、Ruby等服務(wù)端語(yǔ)言平起平坐的腳本語(yǔ)言掖疮。

2. 運(yùn)行一個(gè)helloworld.js

# 查看node的版本

$ node -v

$ cat helloworld.js

console.log("Hello Node.js");

$ node helloworld.js

Hello Node.js

3. 運(yùn)行一個(gè)簡(jiǎn)單的http服務(wù)

3.1 index.js

// 1初茶、加載http模塊

var http = require('http');

// 2、創(chuàng)建一個(gè)http服務(wù)對(duì)象

var server = http.createServer();

// 3浊闪、監(jiān)聽用戶的請(qǐng)求事件（request事件）

// 回調(diào)函數(shù)中有兩個(gè)參數(shù)

// request 對(duì)象 包含用戶請(qǐng)求報(bào)文中所有內(nèi)容恼布，通過(guò)request對(duì)象可以獲取所有用戶提交過(guò)來(lái)的數(shù)據(jù)

// response 對(duì)象 用來(lái)向用戶響應(yīng)一些數(shù)據(jù)，當(dāng)服務(wù)器要向客戶端響應(yīng)數(shù)據(jù)的時(shí)候必須使用response對(duì)象

server.on('request', function (req, res) {

res.setHeader('Content-Type', 'text/html; charset=utf-8');

var url = req.url;

res.write('

web http server
request url :' + url + '

// 對(duì)于每一個(gè)請(qǐng)求搁宾，服務(wù)器必須結(jié)束響應(yīng)折汞，否則，客戶端（瀏覽器）會(huì)一直等待服務(wù)器響應(yīng)結(jié)束

res.end();

});

// 4盖腿、啟動(dòng)服務(wù)

server.listen(8080, function () {

console.log('服務(wù)器啟動(dòng)了爽待，請(qǐng)?jiān)L問(wèn)：http://localhost:8080');

});

3.2 運(yùn)行index.js

$ node index.js

3.3 在瀏覽器上訪問(wèn)http://localhost:8080

三：npm

1. 簡(jiǎn)介

在傳統(tǒng)的前端開發(fā)中我們會(huì)經(jīng)常引入jquery、bootstrap奸忽、echarts等js插件堕伪，我們首先去插件的每個(gè)官網(wǎng)去下載下來(lái)，然后放到自己前端工程中static/js目錄下栗菜，我們每引用一個(gè)插件都要去官網(wǎng)下載欠雌，然后將下載的插件拖到工程中來(lái)，美國(guó)的一個(gè)程序員Isaac Z. Schlueter就做夠了這種機(jī)械運(yùn)動(dòng)疙筹，想簡(jiǎn)化這個(gè)流程富俄，于是做了這樣一件事：

買了臺(tái)服務(wù)器作為代碼倉(cāng)庫(kù)(registry), 用于存放被共享的代碼

發(fā)郵件分別通知各大JS插件作者(如jQuery的作者、bootstrap的作者而咆、Vue的作者霍比、element-ui的作者等等)讓他們使用npm publish 命令將自己的JS插件提交到registry中

用戶如果想使用某個(gè)JS插件可以先在package.json中配置一些需要安裝的插件名稱和對(duì)應(yīng)的版本號(hào)(依賴dependency)，然后通過(guò)npm install命令來(lái)下載它們暴备，下載下來(lái)的插件自動(dòng)放在node_modules目錄下面

這套思想和maven是完全一樣的悠瞬，熟悉maven或者gradle的也就自然理解npm了，只不過(guò)npm用于js,maven用于java，都是作者先將共享的代碼放到某個(gè)公共的代碼倉(cāng)庫(kù)浅妆，用戶先在配置文件中配置好要使用的依賴望迎，然后通過(guò)一個(gè)命令就能下載下來(lái)。

倉(cāng)庫(kù)npmmaven代碼倉(cāng)庫(kù)registryrepository倉(cāng)庫(kù)地址http://registry.npmjs.orghttps://mvnrepository.comtaobao鏡像https://registry.npm.taobao.orghttp://maven.aliyun.com/nexus/content/groups/public配置文件package.json

軟件npm(node package manager)apache-maven下載命令npm installmvn install打包生成的目錄disttarget

npm: Node Package Manager, 一種用Node.js開發(fā)的工具用于發(fā)布插件到倉(cāng)庫(kù)和從插件倉(cāng)庫(kù)中下載插件的工具凌外，一種用于共享JS代碼的工具辩尊。

2. 如何安裝npm

由于node.js當(dāng)時(shí)也缺少一個(gè)包管理器，npm也是使用node.js開發(fā)的康辑，這個(gè)工具使用的人較少摄欲，后來(lái)node.js的作者和npm的作者溝通一下將npm作為node.js包管理器，內(nèi)置到node.js中疮薇，后來(lái)由于node.js大火胸墙，npm使用的人也越來(lái)越多，越來(lái)越多的JS插件通過(guò)npm被共享惦辛，現(xiàn)在幾乎常用的插件都能在npm中找到劳秋，現(xiàn)在的npm已經(jīng)發(fā)展成為前端共享代碼的標(biāo)準(zhǔn)了。因?yàn)閚pm已經(jīng)內(nèi)置于node.js當(dāng)中了胖齐，所以安裝了node.js也就安裝了npm, 可以通過(guò)node -v 和 npm -v 分別查看對(duì)應(yīng)的版本玻淑。

3. 如何生成package.json文件

npm init : 用于生成一個(gè)基礎(chǔ)的package.json文件，里面包含名稱呀伙、版本號(hào)补履、描述、主文件剿另、作者箫锤、協(xié)議等

package.json

{

"name": "platform-webapp",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC"

}

四：webpack

1. 簡(jiǎn)介

傳統(tǒng)的前端一般會(huì)html、javascript雨女、css這三樣?xùn)|西就夠了⊙柙埽現(xiàn)代的前端發(fā)展迅猛，引入了TypeScript氛堕、SCSS馏臭、LESS、stylus(CSS預(yù)處理器)等技術(shù)讼稚，提供了更豐富的特性括儒，提高了開發(fā)效率，但是引入的這些技術(shù)不能直接被瀏覽器解析锐想，需要一個(gè)東西將瀏覽器不能解析的代碼翻譯成瀏覽器可以直接解析代碼帮寻，這就是webpack的作用。

TypeScript是JavaScript類型的超集(簡(jiǎn)單的說(shuō)就是對(duì)JavaScript的封裝)赠摇，提供更加豐富的特性(在JavaScript上添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?固逗，而且可以編譯成純JavaScript

ECMAScript：ECMAScript是標(biāo)準(zhǔn)浅蚪，JavaScript是ECMAScript的實(shí)現(xiàn)，ECMAScript也在快速發(fā)展抒蚜，引入了更多的語(yǔ)法新特性等掘鄙。其中ECMAScript6使用較多，現(xiàn)在ECMAScript8已經(jīng)發(fā)布了嗡髓。

SCSS: SCSS即是SASS的新語(yǔ)法，是Sassy CSS的簡(jiǎn)寫收津，是CSS3語(yǔ)法的超集饿这，也就是說(shuō)所有有效的CSS3樣式也同樣適合于SASS。SASS是CSS3的一個(gè)擴(kuò)展撞秋，增加了規(guī)則嵌套长捧、變量、混合吻贿、選擇器繼承等等串结。通過(guò)使用命令行工具或WEB框架插件把它轉(zhuǎn)換成標(biāo)準(zhǔn)的、格式良好的CSS代碼舅列。

less: Less 是一門 CSS 預(yù)處理語(yǔ)言肌割，它擴(kuò)展了 CSS 語(yǔ)言，增加了變量帐要、Mixin把敞、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展榨惠。Less 可以運(yùn)行在 Node 或?yàn)g覽器端奋早。

stylus：文件后綴是. styl 的這個(gè)哥們兒學(xué)名叫 stylus，是 CSS 的預(yù)處理框架赠橙。stylus 給 CSS 添加了可編程的特性耽装，也就是說(shuō)，在 stylus 中可以使用變量期揪、函數(shù)掉奄、判斷、循環(huán)一系列 CSS 沒(méi)有的東西來(lái)編寫樣式文件横侦，執(zhí)行這一套騷操作之后挥萌，這個(gè)文件可編譯成 CSS 文件。

webpack可以看做是模塊打包機(jī)：它做的事情是枉侧，分析你的項(xiàng)目結(jié)構(gòu)引瀑，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（TypeScript、SCSS等）榨馁，并將其打包為合適的格式以供瀏覽器直接使用憨栽。隨著webpack的發(fā)展，webpack支持ECMAScript6、ECMAScript7屑柔、ECMAScript8等屡萤。隨著webpack的發(fā)展，webpack不僅僅用來(lái)編譯(翻譯)代碼掸宛，也集成了更多的功能死陆，比如：

熱加載：修改了代碼然后保存，瀏覽器會(huì)自動(dòng)刷新

壓縮文件：壓縮圖片唧瘾，字體, 腳本文件等

插件(plugin)：webpack打包時(shí)可以執(zhí)行某個(gè)插件措译，控制webpack打包時(shí)的某個(gè)過(guò)程，這種插件機(jī)制和maven中的插件原理完全一樣

webpack最終發(fā)展成為：前端項(xiàng)目的構(gòu)建工具饰序。

模塊(module)化就是把復(fù)雜的應(yīng)用程序細(xì)分為較小的文件领虹，在webpack中一切都是模塊，js求豫、css塌衰、圖片、字體等待都可稱為模塊蝠嘉。

webpack文檔

2. webpack安裝

webpack可以通過(guò)npm安裝,安裝后會(huì)生成一個(gè)node_modules目錄

# npm初始化,直接回車即可最疆，生成package.json文件

npm init

# npm全局(global)安裝

npm install -g webpack

# 切換到項(xiàng)目根目錄，安裝到你的項(xiàng)目目錄中, 生成node_modules目錄和package-lock.json文件

# 注意：全局安裝的作用是可以在命令行中直接使用命令是晨，效果類似于環(huán)境變量的作用

# 全局安裝后肚菠，仍然需要在自己的項(xiàng)目中再次安裝

# --save-dev 將依賴保存到package.json中的devDependencies中

# --save 將依賴保存到package.json中的dependencies中

npm install --save-dev webpack

3. webpack中的重要功能

3.1 devtool

devtool: "eval-source-map" webpack打包后的文件可讀性非常低，不利于調(diào)試罩缴，使用devtool可以生成對(duì)應(yīng)的源碼便于調(diào)試蚊逢。使用eval打包源文件模塊，在同一個(gè)文件中生成干凈的完整的source map箫章。這個(gè)選項(xiàng)可以在不影響構(gòu)建速度的前提下生成完整的sourcemap烙荷，但是對(duì)打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。在開發(fā)階段這是一個(gè)非常好的選項(xiàng)檬寂，在生產(chǎn)階段則一定不要啟用這個(gè)選項(xiàng)终抽；

3.2 webpack-dev-server

webpack-dev-server 是一個(gè)本地開發(fā)服務(wù)器，居于node.js實(shí)現(xiàn)的桶至，使用npm run dev 后就可以使用默認(rèn)的8080端口在瀏覽器上訪問(wèn)了昼伴，類似于apache的功能

3.3 loaders

loader可以讓webpack有能力調(diào)用外部的腳本或工具，實(shí)現(xiàn)對(duì)不同格式的文件的處理镣屹，比如說(shuō)分析轉(zhuǎn)換scss為css圃郊，或者把下一代的JS文件（ES6，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器兼容的JS文件

css-loader 和 style-loader 就是用來(lái)處理樣式的女蜈。

3.4 babel(很重要)

Babel其實(shí)是一個(gè)編譯JavaScript的平臺(tái)持舆，它可以編譯代碼幫你達(dá)到以下目的：

讓你能使用最新的JavaScript代碼（ES6色瘩，ES7等待），而不用管新標(biāo)準(zhǔn)是否被當(dāng)前使用的瀏覽器完全支持逸寓；

讓你能使用基于JavaScript進(jìn)行了拓展的語(yǔ)言居兆，比如React的JSX；

3.5 plugins

插件（Plugins）是用來(lái)拓展Webpack功能的竹伸，它們會(huì)在整個(gè)構(gòu)建過(guò)程中生效泥栖，執(zhí)行相關(guān)的任務(wù)。

Loaders和Plugins常常被弄混佩伤，但是他們其實(shí)是完全不同的東西聊倔，可以這么來(lái)說(shuō)，loaders是在打包構(gòu)建過(guò)程中用來(lái)處理源文件的（JSX生巡，Scss，Less..）见妒，一次處理一個(gè)孤荣，插件并不直接操作單個(gè)文件，它直接對(duì)整個(gè)構(gòu)建過(guò)程其作用须揣。

Webpack有很多內(nèi)置插件盐股，同時(shí)也有很多第三方插件，可以讓我們完成更加豐富的功能耻卡。

常用的插件：

HtmlWebpackPlugin

Hot Module Replacement（HMR） 熱加載：允許你在修改組件代碼后疯汁，自動(dòng)刷新實(shí)時(shí)預(yù)覽修改后的效果

clean-webpack-plugin 去除build文件中的殘余文件

OccurenceOrderPlugin :為組件分配ID，通過(guò)這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多的模塊卵酪，并為它們分配最小的ID

UglifyJsPlugin： 壓縮JS代碼

ExtractTextPlugin：分離CSS和JS文件

3.6 webpack配置文件

如果與輸入相關(guān)的需求幌蚊，找entry（比如多頁(yè)面就有多個(gè)入口）

如果與輸出相關(guān)的需求，找output（比如你需要定義輸出文件的路徑溃卡、名字等等）

如果與模塊尋址相關(guān)的需求溢豆，找resolve（比如定義別名alias）

如果與轉(zhuǎn)譯相關(guān)的需求，找loader（比如處理sass處理es678N）

如果與構(gòu)建流程相關(guān)的需求瘸羡，找plugin（比如我需要在打包完成后漩仙，將打包好的文件復(fù)制到某個(gè)目錄，然后提交到git上）

五：vue.js是什么

5.1 簡(jiǎn)介

它是一個(gè)輕量級(jí)的MVVM框架犹赖。

使用?數(shù)據(jù)驅(qū)動(dòng)+組件化?來(lái)開队他。

數(shù)據(jù)雙向綁定(當(dāng)修改視圖時(shí)數(shù)據(jù)也會(huì)賦值給model，當(dāng)更改model的時(shí)候也會(huì)反應(yīng)到視圖上)峻村。

頁(yè)面上每個(gè)獨(dú)立的可視或者可交互的區(qū)域均視為一個(gè)組件麸折，每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄(文件夾)，組件所需要的各種資源盡可能的都放在這個(gè)目錄下就近維護(hù)(即將模板雀哨、樣式磕谅、js等都寫在一個(gè).vue文件中)私爷，組件可以嵌套自由組合，形成完整的頁(yè)面膊夹。

5.2 vue腳手架初始化項(xiàng)目

# 1.安裝vue-cli腳手架(用于初始化項(xiàng)目)

$ npm install -g vue-cli

$ 2. 創(chuàng)建項(xiàng)目

$ vue init webpack

# 3. 安裝cnpm(此步驟不是必須的)

# 有些npm有些資源被屏蔽或者是國(guó)外資源的原因衬浑，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴包的時(shí)候失敗，所以還需要npm的國(guó)內(nèi)鏡像—cnpm

npm install -g cnpm –registry=http://registry.npm.taobao.org

# 4. 安裝依賴包

$ cd

# cnpm 需要單獨(dú)安裝放刨，如果沒(méi)有cnpm可以使用npm來(lái)代替

$ cnpm install

# 5. 啟動(dòng)程序就可以在瀏覽器訪問(wèn)

$ npm run dev

# 6. 在瀏覽器訪問(wèn)localhost:8080

5.3 腳手架目錄結(jié)構(gòu)

build : webpack相關(guān)的配置

config：webpack相關(guān)的配置工秩，index.js中可以配置服務(wù)的端口，默認(rèn)是8080, useEslint默認(rèn)是true进统，當(dāng)啟動(dòng)檢查代碼格式時(shí)可以設(shè)置為false

node_module : npm install安裝的依賴代碼庫(kù)

src : 源碼文件助币，開發(fā)都會(huì)在該目錄下進(jìn)行

assets: 存放一些靜態(tài)資源

components：組件，存放.vue文件螟碎，每個(gè)組件分為三部分：template眉菱、script、style

router：路由掉分，配置url路徑對(duì)應(yīng)的組件

App.vue

main.js ：entry入口文件

static : 存放一些靜態(tài)資源

test：?jiǎn)卧獪y(cè)試相關(guān)

.babelrc: babel編譯的相關(guān)配置

.editorconfig : 編輯器相關(guān)的配置(比如字符集俭缓、縮進(jìn)的空格等)

.eslintignore : 配置需要或略的路徑，一般build酥郭、config华坦、dist、test等目錄都會(huì)配置忽略

.eslintrc.js : 配置代碼格式風(fēng)格檢查規(guī)則, 如每行代碼是否強(qiáng)制使用分號(hào); 代碼縮進(jìn)是使用空格還是tab等不从，在啟動(dòng)工程的時(shí)候會(huì)進(jìn)行嚴(yán)格的檢查惜姐，如果不滿足格式就會(huì)啟動(dòng)失敗，主要是讓所有開發(fā)人員保持強(qiáng)一致的開發(fā)風(fēng)格椿息。主要是extends: ["standard"]歹袁、rules等配置。

.gitignore : git或略的文件

index.html : 入口文件撵颊，編譯時(shí)會(huì)將其它代碼插入到index.html中

package.json : 項(xiàng)目的配置文件宇攻，scripts用于配置的腳本，其中dev和build非常常用倡勇，啟動(dòng)項(xiàng)目就是使用 npm run dev命令逞刷，這里的dev就是scripts中的dev, npm start就是對(duì)npm run dev的簡(jiǎn)寫；devDependencies用于編譯時(shí)的依賴妻熊，開發(fā)時(shí)需要夸浅，上線時(shí)用不到；

5.4 基本流程

在控制臺(tái)中輸入 npm run dev,然后在瀏覽器上訪問(wèn)http://localhost:8080/#/helloworld

通過(guò)router/index.js配置好的/helloworld路徑(path)找到對(duì)應(yīng)的組件(component) HelloWorld.vue

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/helloworld',

name: 'HelloWorld',

component: HelloWorld

}

]

})

HelloWorld.vue 就是要訪問(wèn)的內(nèi)容

{{ msg }}

export default {

name: 'HelloWorld',

data () {

return {

msg: 'HelloWorld.vue'

}

}

}

HelloWorld.vue的內(nèi)容將會(huì)替換到App.vue中 <router-view/>

export default {

name: 'App'

}

App.vue的內(nèi)容將會(huì)注入到index.html中的body標(biāo)簽里

platform-webapp

最終的效果如圖

六：集成Element

6.1 安裝element-ui

# 切換到項(xiàng)目根目錄

$ cd

# 安裝element-ui, 安裝后package.json中dependencies就會(huì)增加element-ui依賴

$ cnpm i element-ui -S

6.2 在main.js中配置element-ui

在main.js中增加導(dǎo)入和讓Vue使用ElementUI

import Vue from 'vue'

import App from './App'

import router from './router'

// 導(dǎo)入element-ui

import ElementUI from 'element-ui'

Vue.config.productionTip = false

// Vue使用ElementUI

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

6.3 安裝依賴

cnpm install

6.4 使用element-ui

HelloWorld.vue

{{ msg }}

主要按鈕

export default {

name: 'HelloWorld',

data () {

return {

msg: 'HelloWorld.vue',

num: 5

}

},

methods: {

handleChange(value) {

console.log(value)

}

}

}

6.5 重新啟動(dòng)扔役，訪問(wèn)

npm run dev