我之前寫前端的時候就三個技術(html、js、css)，現在的前端技術一般使用vue.js+element-ui, 一個後端程序員感覺再看現在的前端完全看不懂，js語法也不認識了，css語法也不認識了，html中也出現了不認識的標籤。為了弄懂現在的前端是怎麼玩的就研究了一下，本文是一個後端服務器碼農對現在的大前端技術的掃盲，因不是專業前端，不保證所寫的都是正確的，如有錯誤請指出。
一：Vue.js技術棧
- npm：node.js的包管理工具，用於同一管理我們前端項目中需要用到的包、插件、工具、命令等，便於開發和維護。
- ES6：Javascript的新版本，ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS代碼，同時利用其提供的強大功能來快速實現JS邏輯。
- Babel：一款將ES6代碼轉化為瀏覽器兼容的ES5代碼的插件
- vue-cli：Vue的腳手架工具，用於自動生成Vue項目的目錄及文件。
- vue-router： Vue提供的前端路由工具，利用其我們實現頁面的路由控制，局部刷新及按需加載，構建單頁應用，實現前後端分離。
- vuex：Vue提供的狀態管理工具，用於同一管理我們項目中各種數據的交互和重用，存儲我們需要用到數據對象。
- webpack：一款強大的文件打包工具，可以將我們的前端項目文件同一打包壓縮至js中，並且可以通過vue-loader等加載器實現語法轉化與加載。
二：node.js
1. 簡介
我們知道javascript代碼只能在瀏覽器上運行，只有瀏覽器能夠解析js代碼，如果想要javascript代碼能夠在服務器端運行就必須提供一個Javascript的運行環境(runtime environment)，這就是node.js。
node.js是對Chrome V8引擎進行了封裝，是一個能讓JavaScript運行在服務端的開發平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。
2. 運行一個helloworld.js
<code># 查看node的版本
$ node -v
$ cat helloworld.js
console.log("Hello Node.js");
$ node helloworld.js
Hello Node.js
/<code>
3. 運行一個簡單的http服務
3.1 index.js
<code>// 1、加載http模塊
var http = require('http');
// 2、創建一個http服務對象
var server = http.createServer();
// 3、監聽用戶的請求事件（request事件）
// 回調函數中有兩個參數
// request 對象 包含用戶請求報文中所有內容，通過request對象可以獲取所有用戶提交過來的數據
// response 對象 用來向用戶響應一些數據，當服務器要向客戶端響應數據的時候必須使用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 + '
// 對於每一個請求，服務器必須結束響應，否則，客戶端（瀏覽器）會一直等待服務器響應結束
res.end();
});
// 4、啟動服務
server.listen(8080, function () {
console.log('服務器啟動了，請訪問：http://localhost:8080');
});
/<code>
3.2 運行index.js
<code>$ node index.js
/<code>
3.3 在瀏覽器上訪問http://localhost:8080
三：npm
1. 簡介
在傳統的前端開發中我們會經常引入jquery、bootstrap、echarts等js插件，我們首先去插件的每個官網去下載下來，然後放到自己前端工程中static/js目錄下，我們每引用一個插件都要去官網下載，然後將下載的插件拖到工程中來，美國的一個程序員Isaac Z. Schlueter就做夠了這種機械運動，想簡化這個流程，於是做了這樣一件事：
- 買了臺服務器作為代碼倉庫(registry), 用於存放被共享的代碼
- 發郵件分別通知各大JS插件作者(如jQuery的作者、bootstrap的作者、Vue的作者、element-ui的作者等等)讓他們使用npm publish 命令將自己的JS插件提交到registry中
- 用戶如果想使用某個JS插件可以先在package.json中配置一些需要安裝的插件名稱和對應的版本號(依賴dependency)，然後通過npm install命令來下載它們，下載下來的插件自動放在node_modules目錄下面
這套思想和maven是完全一樣的，熟悉maven或者gradle的也就自然理解npm了，只不過npm用於js,maven用於java，都是作者先將共享的代碼放到某個公共的代碼倉庫，用戶先在配置文件中配置好要使用的依賴，然後通過一個命令就能下載下來。
|倉庫 | npm | maven |
|----------|:-------------:|:------:|
| 代碼倉庫 | registry | repository |
| 倉庫地址 | http://registry.npmjs.org | https://mvnrepository.com |
| taobao鏡像 | https://registry.npm.taobao.org | http://maven.aliyun.com/nexus/content/groups/public |
| 配置文件 | package.json"dependencies": {"vue": "^2.5.13"} | pom.xml<dependencies><dependency><groupid>com.alibaba/<groupid><artifactid>fastjson/<artifactid><version>1.2.6/<version>/<dependency><dependencies>|/<dependencies>/<dependencies>
| 軟件 | npm(node package manager) | apache-maven |
| 下載命令 | npm install | mvn install |
| 打包生成的目錄 | dist | target |
npm: Node Package Manager, 一種用Node.js開發的工具用於發佈插件到倉庫和從插件倉庫中下載插件的工具，一種用於共享JS代碼的工具。
2. 如何安裝npm
由於node.js當時也缺少一個包管理器，npm也是使用node.js開發的，這個工具使用的人較少，後來node.js的作者和npm的作者溝通一下將npm作為node.js包管理器，內置到node.js中，後來由於node.js大火，npm使用的人也越來越多，越來越多的JS插件通過npm被共享，現在幾乎常用的插件都能在npm中找到，現在的npm已經發展成為前端共享代碼的標準了。因為npm已經內置於node.js當中了，所以安裝了node.js也就安裝了npm, 可以通過node -v 和 npm -v 分別查看對應的版本。
3. 如何生成package.json文件
npm init : 用於生成一個基礎的package.json文件，裡面包含名稱、版本號、描述、主文件、作者、協議等
package.json
<code>{
"name": "platform-webapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
/<code>四：webpack
1. 簡介
傳統的前端一般會html、javascript、css這三樣東西就夠了。現代的前端發展迅猛，引入了TypeScript、SCSS、LESS、stylus(CSS預處理器)等技術，提供了更豐富的特性，提高了開發效率，但是引入的這些技術不能直接被瀏覽器解析，需要一個東西將瀏覽器不能解析的代碼翻譯成瀏覽器可以直接解析代碼，這就是webpack的作用。
- TypeScript是JavaScript類型的超集(簡單的說就是對JavaScript的封裝)，提供更加豐富的特性(在JavaScript上添加了可選的靜態類型和基於類的面向對象編程)，而且可以編譯成純JavaScript
- ECMAScript：ECMAScript是標準，JavaScript是ECMAScript的實現，ECMAScript也在快速發展，引入了更多的語法新特性等。其中ECMAScript6使用較多，現在ECMAScript8已經發布了。
- SCSS: SCSS即是SASS的新語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合於SASS。SASS是CSS3的一個擴展，增加了規則嵌套、變量、混合、選擇器繼承等等。通過使用命令行工具或WEB框架插件把它轉換成標準的、格式良好的CSS代碼。
- less: Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。
- stylus：文件後綴是. styl 的這個哥們兒學名叫 stylus，是 CSS 的預處理框架。stylus 給 CSS 添加了可編程的特性，也就是說，在 stylus 中可以使用變量、函數、判斷、循環一系列 CSS 沒有的東西來編寫樣式文件，執行這一套騷操作之後，這個文件可編譯成 CSS 文件。
webpack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（TypeScript、SCSS等），並將其打包為合適的格式以供瀏覽器直接使用。隨著webpack的發展，webpack支持ECMAScript6、ECMAScript7、ECMAScript8等。隨著webpack的發展，webpack不僅僅用來編譯(翻譯)代碼，也集成了更多的功能，比如：
- 熱加載：修改了代碼然後保存，瀏覽器會自動刷新
- 壓縮文件：壓縮圖片，字體, 腳本文件等
- 插件(plugin)：webpack打包時可以執行某個插件，控制webpack打包時的某個過程，這種插件機制和maven中的插件原理完全一樣
webpack最終發展成為：前端項目的構建工具。
模塊(module)化就是把複雜的應用程序細分為較小的文件，在webpack中一切都是模塊，js、css、圖片、字體等待都可稱為模塊。
webpack文檔
2. webpack安裝
webpack可以通過npm安裝,安裝後會生成一個node_modules目錄
<code># npm初始化,直接回車即可，生成package.json文件
npm init
# npm全局(global)安裝
npm install -g webpack
# 切換到項目根目錄，安裝到你的項目目錄中, 生成node_modules目錄和package-lock.json文件
# 注意：全局安裝的作用是可以在命令行中直接使用命令，效果類似於環境變量的作用
# 全局安裝後，仍然需要在自己的項目中再次安裝
# --save-dev 將依賴保存到package.json中的devDependencies中
# --save 將依賴保存到package.json中的dependencies中
npm install --save-dev webpack
/<code>
<code># webpack 打包命令
webpack -o
webpack src/index.js -o dist/index.bundle.js
# 如果報錯Error: Cannot find module 'webpack-cli'，執行下面命令
npm install webpack-cli -g
/<code>
3. webpack中的重要功能
3.1 devtool
devtool: "eval-source-map" webpack打包後的文件可讀性非常低，不利於調試，使用devtool可以生成對應的源碼便於調試。使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項可以在不影響構建速度的前提下生成完整的sourcemap，但是對打包後輸出的JS文件的執行具有性能和安全的隱患。在開發階段這是一個非常好的選項，在生產階段則一定不要啟用這個選項；
3.2 webpack-dev-server
webpack-dev-server 是一個本地開發服務器，居於node.js實現的，使用npm run dev 後就可以使用默認的8080端口在瀏覽器上訪問了，類似於apache的功能
3.3 loaders
loader可以讓webpack有能力調用外部的腳本或工具，實現對不同格式的文件的處理，比如說分析轉換scss為css，或者把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器兼容的JS文件
css-loader 和 style-loader 就是用來處理樣式的。
3.4 babel(很重要)
Babel其實是一個編譯JavaScript的平臺，它可以編譯代碼幫你達到以下目的：
- 讓你能使用最新的JavaScript代碼（ES6，ES7等待），而不用管新標準是否被當前使用的瀏覽器完全支持；
- 讓你能使用基於JavaScript進行了拓展的語言，比如React的JSX；
3.5 plugins
插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。
Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包構建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操作單個文件，它直接對整個構建過程其作用。
Webpack有很多內置插件，同時也有很多第三方插件，可以讓我們完成更加豐富的功能。
常用的插件：
- HtmlWebpackPlugin
- Hot Module Replacement（HMR） 熱加載：允許你在修改組件代碼後，自動刷新實時預覽修改後的效果
- clean-webpack-plugin 去除build文件中的殘餘文件
- OccurenceOrderPlugin :為組件分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，併為它們分配最小的ID
- UglifyJsPlugin： 壓縮JS代碼
- ExtractTextPlugin：分離CSS和JS文件
3.6 webpack配置文件
- 如果與輸入相關的需求，找entry（比如多頁面就有多個入口）
- 如果與輸出相關的需求，找output（比如你需要定義輸出文件的路徑、名字等等）
- 如果與模塊尋址相關的需求，找resolve（比如定義別名alias）
- 如果與轉譯相關的需求，找loader（比如處理sass處理es678N）
- 如果與構建流程相關的需求，找plugin（比如我需要在打包完成後，將打包好的文件複製到某個目錄，然後提交到git上）
五：vue.js是什麼
5.1 簡介
- 它是一個輕量級的MVVM框架。
- 使用 數據驅動+組件化 來開。
- 數據雙向綁定(當修改視圖時數據也會賦值給model，當更改model的時候也會反應到視圖上)。
頁面上每個獨立的可視或者可交互的區域均視為一個組件，每個組件對應一個工程目錄(文件夾)，組件所需要的各種資源儘可能的都放在這個目錄下
就近維護(即將模板、樣式、js等都寫在一個.vue文件中)，組件可以嵌套自由組合，形成完整的頁面。
5.2 vue腳手架初始化項目
<code># 1.安裝vue-cli腳手架(用於初始化項目)
$ npm install -g vue-cli
$ 2. 創建項目
$ vue init webpack <project>
# 3. 安裝cnpm(此步驟不是必須的)
# 有些npm有些資源被屏蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所以還需要npm的國內鏡像—cnpm
npm install -g cnpm –registry=http://registry.npm.taobao.org
# 4. 安裝依賴包
$ cd <project>
# cnpm 需要單獨安裝，如果沒有cnpm可以使用npm來代替
$ cnpm install
# 5. 啟動程序就可以在瀏覽器訪問
$ npm run dev
# 6. 在瀏覽器訪問localhost:8080
/<project>/<project>/<code>
5.3 腳手架目錄結構
- build : webpack相關的配置
- config：webpack相關的配置，index.js中可以配置服務的端口，默認是8080, useEslint默認是true，當啟動檢查代碼格式時可以設置為false
- node_module : npm install安裝的依賴代碼庫
- src : 源碼文件，開發都會在該目錄下進行assets: 存放一些靜態資源components：組件，存放.vue文件，每個組件分為三部分：template、script、stylerouter：路由，配置url路徑對應的組件App.vuemain.js ：entry入口文件
- static : 存放一些靜態資源
- test：單元測試相關
- .babelrc: babel編譯的相關配置
- .editorconfig : 編輯器相關的配置(比如字符集、縮進的空格等)
- .eslintignore : 配置需要或略的路徑，一般build、config、dist、test等目錄都會配置忽略
- .eslintrc.js : 配置代碼格式風格檢查規則, 如每行代碼是否強制使用分號; 代碼縮進是使用空格還是tab等，在啟動工程的時候會進行嚴格的檢查，如果不滿足格式就會啟動失敗，主要是讓所有開發人員保持強一致的開發風格。主要是extends: ["standard"]、rules等配置。
- .gitignore : git或略的文件
- index.html : 入口文件，編譯時會將其它代碼插入到index.html中
- package.json : 項目的配置文件，scripts用於配置的腳本，其中dev和build非常常用，啟動項目就是使用npm run dev命令，這裡的dev就是scripts中的dev, npm start就是對npm run dev的簡寫；devDependencies用於編譯時的依賴，開發時需要，上線時用不到；
5.4 基本流程
- 在控制檯中輸入npm run dev,然後在瀏覽器上訪問http://localhost:8080/#/helloworld
- 通過router/index.js配置好的/helloworld路徑(path)找到對應的組件(component) HelloWorld.vue
<code>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
}
]
})
/<code>
- HelloWorld.vue 就是要訪問的內容
<code><template>
{{ msg }}
/<template>
/<code>
- HelloWorld.vue的內容將會替換到App.vue中<router-view>
<code><template>
<router-view>
/<template>
/<code>
- App.vue的內容將會注入到index.html中的body標籤裡
<code>
<title>platform-webapp/<title>
/<code>
- 最終的效果如圖
六：集成Element
6.1 安裝element-ui
<code># 切換到項目根目錄
$ cd <project>
# 安裝element-ui, 安裝後package.json中dependencies就會增加element-ui依賴
$ cnpm i element-ui -S
/<project>/<code>
6.2 在main.js中配置element-ui
在main.js中增加導入和讓Vue使用ElementUI
<code>import Vue from 'vue'
import App from './App'
import router from './router'
// 導入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: ''
})
/<code>
6.3 安裝依賴
cnpm install
6.4 使用element-ui
HelloWorld.vue
<code><template>
{{ msg }}
<el-button>主要按鈕/<el-button>
<el-input-number>
/<template>
/<code>
6.5 重新啟動，訪問
npm run dev
歡迎關注Java實用技術，本賬號將堅持每天發佈一篇工作中常用實用的技術。
閱讀更多 Java實用技術 的文章
