Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 掃盲
2018年12月09日 20:32:59?vbirdbest?閱讀數 7043更多
分類專欄：?Vue.js + ElementUI
版權聲明：本文為博主原創文章，遵循?CC 4.0 BY-SA?版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/vbirdbest/article/details/84871336
分享一個朋友的人工智能教程(請以“右鍵”->"在新標簽頁中打開連接”的方式訪問)。比較通俗易懂，風趣幽默，感興趣的朋友可以去看看。
我之前寫前端的時候就三個技術(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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
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'); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
3.2 運行index.js
$ node index.js- 1
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，都是作者先將共享的代碼放到某個公共的代碼倉庫，用戶先在配置文件中配置好要使用的依賴，然后通過一個命令就能下載下來。
| 代碼倉庫 | 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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
四：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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
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-cli$ 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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
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 基本流程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
六：集成Element
6.1 安裝element-ui
# 切換到項目根目錄 $ cd <project root dir> # 安裝element-ui, 安裝后package.json中dependencies就會增加element-ui依賴 $ cnpm i element-ui -S- 1
- 2
- 3
- 4
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/>' })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
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><!-- 樣式省略 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
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组件化开发实践
- 下一篇： 基于vue-cli、elementUI的