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

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

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

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

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

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

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

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

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

二：node.js

1. 簡介

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

node.js是對Chrome V8引擎進(jìn)行了封裝，是一個能讓JavaScript運(yùn)行在服務(wù)端的開發(fā)平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務(wù)端語言平起平坐的腳本語言。

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

# 查看node的版本

$ node -v

$ cat helloworld.js

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

$ node helloworld.js

Hello Node.js

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

3.1 index.js

// 1、加載http模塊

var http = require('http');

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

var server = http.createServer();

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

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

// request 對象 包含用戶請求報文中所有內(nèi)容，通過request對象可以獲取所有用戶提交過來的數(shù)據(jù)

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

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 + '

// 對于每一個請求，服務(wù)器必須結(jié)束響應(yīng)，否則，客戶端（瀏覽器）會一直等待服務(wù)器響應(yīng)結(jié)束

res.end();

});

// 4、啟動服務(wù)

server.listen(8080, function () {

console.log('服務(wù)器啟動了，請?jiān)L問：http://localhost:8080');

});

3.2 運(yùn)行index.js

$ node index.js

3.3 在瀏覽器上訪問http://localhost:8080

三：npm

1. 簡介

在傳統(tǒng)的前端開發(fā)中我們會經(jīng)常引入jquery、bootstrap、echarts等js插件，我們首先去插件的每個官網(wǎng)去下載下來，然后放到自己前端工程中static/js目錄下，我們每引用一個插件都要去官網(wǎng)下載，然后將下載的插件拖到工程中來，美國的一個程序員Isaac Z. Schlueter就做夠了這種機(jī)械運(yùn)動，想簡化這個流程，于是做了這樣一件事：

買了臺服務(wù)器作為代碼倉庫(registry), 用于存放被共享的代碼

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

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

這套思想和maven是完全一樣的，熟悉maven或者gradle的也就自然理解npm了，只不過npm用于js,maven用于java，都是作者先將共享的代碼放到某個公共的代碼倉庫，用戶先在配置文件中配置好要使用的依賴，然后通過一個命令就能下載下來。

倉庫npmmaven代碼倉庫registryrepository倉庫地址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ā)布插件到倉庫和從插件倉庫中下載插件的工具，一種用于共享JS代碼的工具。

2. 如何安裝npm

由于node.js當(dāng)時也缺少一個包管理器，npm也是使用node.js開發(fā)的，這個工具使用的人較少，后來node.js的作者和npm的作者溝通一下將npm作為node.js包管理器，內(nèi)置到node.js中，后來由于node.js大火，npm使用的人也越來越多，越來越多的JS插件通過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, 可以通過node -v 和 npm -v 分別查看對應(yīng)的版本。

3. 如何生成package.json文件

npm init : 用于生成一個基礎(chǔ)的package.json文件，里面包含名稱、版本號、描述、主文件、作者、協(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. 簡介

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

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

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

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

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

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

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

熱加載：修改了代碼然后保存，瀏覽器會自動刷新

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

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

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

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

webpack文檔

2. webpack安裝

webpack可以通過npm安裝,安裝后會生成一個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可以生成對應(yīng)的源碼便于調(diào)試。使用eval打包源文件模塊，在同一個文件中生成干凈的完整的source map。這個選項(xiàng)可以在不影響構(gòu)建速度的前提下生成完整的sourcemap，但是對打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。在開發(fā)階段這是一個非常好的選項(xiàng)，在生產(chǎn)階段則一定不要啟用這個選項(xiàng)；

3.2 webpack-dev-server

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

3.3 loaders

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

css-loader 和 style-loader 就是用來處理樣式的。

3.4 babel(很重要)

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

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

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

3.5 plugins

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

Loaders和Plugins常常被弄混，但是他們其實(shí)是完全不同的東西，可以這么來說，loaders是在打包構(gòu)建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件并不直接操作單個文件，它直接對整個構(gòu)建過程其作用。

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

常用的插件：

HtmlWebpackPlugin

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

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

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

UglifyJsPlugin： 壓縮JS代碼

ExtractTextPlugin：分離CSS和JS文件

3.6 webpack配置文件

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

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

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

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

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

五：vue.js是什么

5.1 簡介

它是一個輕量級的MVVM框架。

使用?數(shù)據(jù)驅(qū)動+組件化?來開。

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

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

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有些資源被屏蔽或者是國外資源的原因，經(jīng)常會導(dǎo)致用npm安裝依賴包的時候失敗，所以還需要npm的國內(nèi)鏡像—cnpm

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

# 4. 安裝依賴包

$ cd

# cnpm 需要單獨(dú)安裝，如果沒有cnpm可以使用npm來代替

$ cnpm install

# 5. 啟動程序就可以在瀏覽器訪問

$ npm run dev

# 6. 在瀏覽器訪問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)啟動檢查代碼格式時可以設(shè)置為false

node_module : npm install安裝的依賴代碼庫

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

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

components：組件，存放.vue文件，每個組件分為三部分：template、script、style

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

App.vue

main.js ：entry入口文件

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

test：單元測試相關(guān)

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

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

.eslintignore : 配置需要或略的路徑，一般build、config、dist、test等目錄都會配置忽略

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

.gitignore : git或略的文件

index.html : 入口文件，編譯時會將其它代碼插入到index.html中

package.json : 項(xiàng)目的配置文件，scripts用于配置的腳本，其中dev和build非常常用，啟動項(xiàng)目就是使用 npm run dev命令，這里的dev就是scripts中的dev, npm start就是對npm run dev的簡寫；devDependencies用于編譯時的依賴，開發(fā)時需要，上線時用不到；

5.4 基本流程

在控制臺中輸入 npm run dev,然后在瀏覽器上訪問http://localhost:8080/#/helloworld

通過router/index.js配置好的/helloworld路徑(path)找到對應(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 就是要訪問的內(nèi)容

{{ msg }}

export default {

name: 'HelloWorld',

data () {

return {

msg: 'HelloWorld.vue'

}

}

}

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

export default {

name: 'App'

}

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

platform-webapp

最終的效果如圖

六：集成Element

6.1 安裝element-ui

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

$ cd

# 安裝element-ui, 安裝后package.json中dependencies就會增加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 重新啟動，訪問

npm run dev