Vue.js(一) Vue.js + element-ui 掃盲

阿新 • • 發佈：2018-12-31

我之前寫前端的時候就三個技術(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

# 檢視node的版本
$ node -v

$ cat helloworld.js
console.log( 
"Hello Node.js");

$ node helloworld.js
Hello Node.js

3. 執行一個簡單的http服務

3.1 index.js

// 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('<h1> web http server <br/> request url :' + url + ' </h1>');
  // 對於每一個請求，伺服器必須結束響應，否則，客戶端（瀏覽器）會一直等待伺服器響應結束
  res.end();
});
 
// 4、啟動服務
server.listen(8080, function () {
  console.log('伺服器啟動了，請訪問：http://localhost:8080');
});

3.2 執行index.js

$ node index.js

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>`
軟體	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

{
  "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. 簡介

傳統的前端一般會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目錄

# 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

# webpack 打包命令
webpack <原始檔> -o <目標檔案>

webpack src/index.js -o dist/index.bundle.js

# 如果報錯Error: Cannot find module 'webpack-cli'，執行下面命令
npm install webpack-cli -g

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腳手架初始化專案

# 1.安裝vue-cli腳手架(用於初始化專案)
$ npm install -g vue-cl

$ 2. 建立專案
$ vue init webpack <project name>

# 3. 安裝cnpm(此步驟不是必須的)
# 有些npm有些資源被遮蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所以還需要npm的國內映象—cnpm
npm install -g cnpm –registry=http://registry.npm.taobao.org

# 4. 安裝依賴包
$ cd <project name>
# cnpm 需要單獨安裝，如果沒有cnpm可以使用npm來代替
$ cnpm install

# 5. 啟動程式就可以在瀏覽器訪問
$ npm run dev

# 6. 在瀏覽器訪問localhost:8080

5.3 腳手架目錄結構

在這裡插入圖片描述

build : webpack相關的配置
config：webpack相關的配置，index.js中可以配置服務的埠，預設是8080, useEslint預設是true，當啟動檢查程式碼格式時可以設定為false
node_module : npm install安裝的依賴程式碼庫
src : 原始碼檔案，開發都會在該目錄下進行
- assets: 存放一些靜態資源
- components：元件，存放.vue檔案，每個元件分為三部分：template、script、style
- router：路由，配置url路徑對應的元件
- App.vue
- main.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

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 就是要訪問的內容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld.vue'
    }
  }
}
</script>

<!-- style 標籤省略了 -->

HelloWorld.vue的內容將會替換到App.vue中<router-view/>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<!-- style 標籤省略了 -->

App.vue的內容將會注入到index.html中的body標籤裡

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>platform-webapp</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

最終的效果如圖

六：整合Element

6.1 安裝element-ui

# 切換到專案根目錄
$ cd <project root dir>
# 安裝element-ui, 安裝後package.json中dependencies就會增加element-ui依賴
$ cnpm i element-ui -S

6.2 在main.js中配置element-ui

在main.js中增加匯入和讓Vue使用ElementUI

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: '<App/>'
})

6.3 安裝依賴

cnpm install

6.4 使用element-ui

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-button type="primary">主要按鈕</el-button>
    <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"></el-input-number>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld.vue',
      num: 5
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<!-- 樣式省略 -->

6.5 重新啟動，訪問

npm run dev

在這裡插入圖片描述

七：參考文章

入門Webpack，看這篇就夠了 https://www.jianshu.com/p/42e11515c10f
搭建vscode+vue環境 https://blog.csdn.net/mao834099514/article/details/79138484

Vue.js(一) Vue.js + element-ui 掃盲

一：Vue.js技術棧

二：node.js

1. 簡介

2. 執行一個helloworld.js

3. 執行一個簡單的http服務

3.1 index.js

3.2 執行index.js

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

三：npm

1. 簡介

2. 如何安裝npm

3. 如何生成package.json檔案

四：webpack

1. 簡介

2. webpack安裝

3. webpack中的重要功能

3.1 devtool

3.2 webpack-dev-server

3.3 loaders

3.4 babel(很重要)

3.5 plugins

3.6 webpack配置檔案

五：vue.js是什麼

5.1 簡介

5.2 vue腳手架初始化專案

5.3 腳手架目錄結構

5.4 基本流程

六：整合Element

6.1 安裝element-ui

6.2 在main.js中配置element-ui

6.3 安裝依賴

6.4 使用element-ui

6.5 重新啟動，訪問

七：參考文章

相關推薦