Vue全家桶-前端工程化

一、模塊化相關(guān)規(guī)范

1.模塊化概述

傳統(tǒng)開發(fā)模式的主要問題:

命名沖突,文件依賴

通過模塊化解決上述問題:

模塊化就是把單獨(dú)的一個(gè)功能封裝到一個(gè)模塊(文件)中,模塊之間相互隔離,但是可以通過特定的接口公開內(nèi)部成員,也可以依賴別的模塊。

模塊化開發(fā)的好處:方便代碼重用,從而提升開發(fā)效率,并且方便后期的維護(hù)。

2.瀏覽器端模塊化規(guī)范

①AMD

Require.js (http://www.requirejs.cn/)

②CMD

Sea.js (http://seajs.github.io/seajs/docs/)

3.服務(wù)器端模塊化規(guī)范

①CommonJS

模塊化分為單文件模塊與包

模塊成員導(dǎo)出:module.exports和exports

模塊成員導(dǎo)入:require('模塊標(biāo)識符')

4.大一統(tǒng)的模塊化規(guī)范-ES6模塊化

在ES6模塊化規(guī)范誕生之前,JavaScript社區(qū)已經(jīng)嘗試并提出了AMD, CMD,CommonJS等模塊化規(guī)范。

但是,這些社區(qū)提出的模塊化標(biāo)準(zhǔn),還是存在一定的差異性與局限性,并不是瀏覽器與服務(wù)器通用的模塊化標(biāo)準(zhǔn),例如

AMD和CMD適用于瀏覽器端的JavaScript模塊化。

CommonJS適用于服務(wù)器端的JavaScript模塊化

因此,ES6語法規(guī)范中,在語言層面上定義了ES6模塊化規(guī)范,是瀏覽器端與服務(wù)器端通用的模塊化開發(fā)規(guī)范。

ES6模塊化規(guī)范中的定義:

每個(gè)js文件都是一個(gè)獨(dú)立的模塊

導(dǎo)入模塊成員使用import關(guān)鍵字

暴露模塊成員使用exolport關(guān)鍵字

①Node.js中通過babel體驗(yàn)ES6模塊化

⑴npm install --save-dev @babel/core @babel/click @babel/preset-env @babel/node

⑵npm install --save @babel/polyfill

(3)項(xiàng)目根目錄創(chuàng)建文件 babel.config.js

(4)babel.config.js文件內(nèi)容如下面代碼

const presets = [

? ? ["@babel/env", {

? ? ? ? targets : {

? ? ? ? edge: "17",

? ? ? ? firefox : "60",

? ? ? ? chrome : "67",

? ? ? ? safari : "11.1"

? ? ? ? }

? ? }]

];

module.exports = { presets };

⑸通過npx babel-node index.js執(zhí)行代碼

5.ES6模塊化的基本語法

①默認(rèn)導(dǎo)出與默認(rèn)導(dǎo)入

默認(rèn)導(dǎo)出語法: export default 默認(rèn)導(dǎo)出的成員

默認(rèn)導(dǎo)入語法: import 接收名稱 from '模塊標(biāo)識符'

//導(dǎo)入模塊成員

import m1 from './m1.js'

console.log(m1);

//打印輸出的結(jié)果為:

// {a:10,c:20,show:[Function:show]}

//當(dāng)前文件為m1.js

//定義私有成員a和c

let a = 10

let c = 20

//外界訪問不到變量d,因?yàn)樗鼪]有暴露出去

let d = 30

function show () {

? ? ? //將本模塊中的私有成員暴露出去,供其他模塊使用

export default {

? ? a,

? ? c,

? ? show

}

注意:每個(gè)模塊中,只允許使用唯一的一次 export default,否則會報(bào)錯(cuò)。

②按需導(dǎo)出與按需導(dǎo)入

按需導(dǎo)出語法: export let s1 = 10

按需導(dǎo)入語法: import { s1 } from '模塊標(biāo)識符'

//導(dǎo)入模塊成員

import { s1,s2 as ss2,say} from './m1.js'

console.log(s1)//aaa

console.log(ss2)//ccc

console.log(say)//[Function : say]

//當(dāng)前文件模塊為m1.js

//向外按需導(dǎo)出變量s1,s2,say

export let s1 = 'aaa'

export let s2 = 'ccc'

export function say = function () {}

注意:每個(gè)模塊中,可以使用多次按需導(dǎo)出

③直接導(dǎo)入并執(zhí)行模塊代碼

有時(shí)候,我們只想單純執(zhí)行某個(gè)模塊中的代碼,并不需要得到模塊中向外暴露的成員,此時(shí),可以直接導(dǎo)入并執(zhí)行模塊代碼。

//直接導(dǎo)入并執(zhí)行模塊代碼

import './m2.js'

//當(dāng)前文件模塊m2.js

//在當(dāng)前模塊中執(zhí)行一個(gè)for循環(huán)操作

for(let i = 0; i < 3; i++) {

? ? consol.log(i)

}

二、webpack

1.當(dāng)前web開發(fā)面臨的問題

文件依賴關(guān)系錯(cuò)綜復(fù)雜

靜態(tài)資源請求效率低

模塊化支持不友好

瀏覽器對高級JavaScript特性兼容程度較低

etc...

2.webpack概述

webpack是一個(gè)流行的前端項(xiàng)目構(gòu)建工具(打包工具),可以解決當(dāng)前web開發(fā)中所面臨的困境。

webpack提供了友好的模塊化支持,以及代碼壓縮混淆,處理js兼容問題,性能優(yōu)化等強(qiáng)大的功能,從而讓程序員把工作的重心放到具體的功能實(shí)現(xiàn)上,提高了開發(fā)效率和項(xiàng)目的可維護(hù)性。

目前大多數(shù)企業(yè)中的前端項(xiàng)目,都是基于webpack進(jìn)行打包構(gòu)建的。

webpack的基本使用:

①創(chuàng)建列表隔行變色項(xiàng)目

⑴新建項(xiàng)目空白目錄,并運(yùn)行 npm init -y命令,初始化包管理配置文件package.json

⑵新建src源代碼目錄

⑶新建src -> index.html首頁

⑷初始化首頁基本的結(jié)構(gòu)

⑸運(yùn)行 npm install jQuery -S命令,安裝jQuery

(6)通過模塊化的形式,實(shí)現(xiàn)列表隔行變色效果

②在項(xiàng)目中安裝和配置webpack

⑴運(yùn)行 npm install webpack-cli -D命令,安裝webpack相關(guān)的包

⑵在項(xiàng)目根目錄中,窗簾名為webpack.config.js的webpack配置文件

⑶在webpack的配置文件中,初始化如下基本配置:

module.exports = {

? ? mode : 'development' //mode用來指定構(gòu)建模式

}

⑷在package的配置文件中scripts節(jié)點(diǎn)下,新增dev腳本如下:

"scripts": {

? ? "dev" : "webpack" //script節(jié)點(diǎn)下的腳本,可以通過npm run 執(zhí)行

}

⑸在終端中運(yùn)行npm run dev命令,啟動webpack進(jìn)行項(xiàng)目打包。

③配置打包的入口與出口

webpack的4.x版本中默認(rèn)約定:

打包的入口文件為src -> index.js

打包的輸出文件為dist ->main.js

如果要修改打包的入口與出口,可以在webpack.config.js中新增如下配置信息:

const path = require('path')//導(dǎo)入node.js中專門操作路徑的模塊

module.exports = {

? entry : path.join(__dirname, './src/index.js') //打包入口文件的路徑

output: {

? path: path.join(__dirname, './dist'),//輸出文件存放路徑

? filename: 'bundle.js' //輸出文件的名稱

? }

}

④配置webpack的基本使用

⑴運(yùn)行npm install webpack-dev-server -D命令,安裝支持項(xiàng)目自動打包的工具

⑵修改package.json -> scripts中的dev命令如下:

"scripts" : {

? ? "dev": "webpack-dev-server" //script節(jié)點(diǎn)下的腳本,可以通過npm run運(yùn)行

⑶將src -> index.html中,script腳本的引用路徑,修改為"/buldel.js"

⑷運(yùn)行npm run dev 命令重新進(jìn)行打包

⑸在瀏覽器中訪問http://localhost:8080地址,查看自動打包效果

注意:webpack-dev-server會啟動一個(gè)實(shí)時(shí)打包的http服務(wù)器

webpack-dev-server 打包生成的輸出文件,默認(rèn)放到了項(xiàng)目根目錄中,而且是虛擬的,看不見的。

⑤配置html-webpack-plugin生成預(yù)覽頁面

⑴運(yùn)行npm install html-webpack-plugin -D命令,安裝生成預(yù)覽頁面的插件

⑵修改webpack.config.js文件頭部區(qū)域,添加如下配置信息

//導(dǎo)入生成預(yù)覽頁面的插件,得到一個(gè)構(gòu)造函數(shù)

const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({//創(chuàng)建插件的實(shí)例對象

? ? template:'./src/index.html',//指定要用到的模板文件

? ? filename : 'index.html'? //指定生成的文件的名稱,該文件存在于內(nèi)存中,在目錄中不顯示

})

⑶修改webpack.config.js文件中向外暴露的配置對象,新增如下配置節(jié)點(diǎn):

module.exports = {

? ? plugins: [ htmlPlugin] //plugins數(shù)組是webpack打包期間會用到的一些插件列表

}

⑥配置自動打包相關(guān)的參數(shù)

//package.json中的配置

//--open 打包完成后自動打開瀏覽器頁面

//--host配置IP地址

//--port配置端口

"scripts": {

? ? "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

}

3.webpack中的加載器

①通過loader打包非js模塊

在實(shí)際開發(fā)過程中,webpack默認(rèn)只能打包處理以.js后綴名結(jié)尾的模塊,其他非.js后綴名結(jié)尾的模塊,webpack默認(rèn)處理不了,需要調(diào)用loader加載器才可以正常打包,否則會報(bào)錯(cuò)。

loader加載器可以協(xié)助webpack打包處理特定的文件模塊,比如:

less-loader可以打包處理.less相關(guān)的文件

sass-loader可以打包處理.scss相關(guān)的文件

url-loader可以打包處理css中的url路徑相關(guān)的文件。

②loader的調(diào)用過程

將要被webpack打包處理的文件模塊-是否為js模塊,

4.webpack中加載器的基本使用

CSS

LESS

SCSS

PostCSS

JavaScript

Image/Font

Vue

①打包處理css文件

⑴運(yùn)行npm i style-loader css-loader -D命令,安裝處理css 文件的loader

⑵在webpack.config.js的module -> rules數(shù)組中,添加loader規(guī)則如下:

//所有第三方文件模塊的匹配規(guī)則

module: {

? ? rules : [

? ? ? { test : /\.css$/, use : ['style-loader','css-loader']}

? ? ]

}

其中,test表示匹配的文件類型,use表示對應(yīng)要調(diào)用的loader

注意:

use數(shù)組中指定的loader順序是固定的

多個(gè)loader的調(diào)用順序是:從后往前調(diào)用。

②打包處理less文件

⑴運(yùn)行npm i less-loader less -D命令

⑵在webpack.config.js的module -> rules數(shù)組中,添加loader規(guī)則如下:

//所有第三方文件模塊的匹配規(guī)則

module: {

? rules:[

? ? { test: /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']}

? ]

}

③打包處理scss文件

⑴運(yùn)行npm i sass-loader node-sass -D命令

⑵在webpack.config.js的module -> rules數(shù)組中,添加loader規(guī)則如下:

//所有第三方文件模塊的匹配規(guī)則

module: {

? rules:[

? ? { test: /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader']}

? ]

}

④配置postCss自動添加css的兼容前綴

⑴運(yùn)行npm i postcss-loader autoprefixer -D命令

⑵在項(xiàng)目根目錄中創(chuàng)建postcss的配置文件postcss.config.js,并初始化如下配置:

const autoprefixer = require('autoprefixer') //導(dǎo)入自動添加前綴的插件

module.exports = {

? plugins: [autoprefixer]? //掛載插件

}

⑶在webpack.config.js的module -> rules 數(shù)組中,修改css 的loader規(guī)則如下:

module: {

? rules:[

? ? { test: /\.css$/, use : ['style-loader', 'css-loader', 'postcss-loader']}

? ]

}

⑤打包樣式表中的圖片和字體文件

⑴運(yùn)行 npm i url-loader file-loader -D命令

⑵在webpack.config.js的 module -> rules數(shù)組中,添加loader規(guī)則如下:

module: {

? rules: [

? ? ? {

? ? ? ? test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,

? ? ? ? use: 'url-loader?limit=16940'

? ? ? }

? ]

}

其中?之后的是loader的參數(shù)項(xiàng)。limit用來指定圖片的大小,單位是字節(jié)byte,只有小于limit大小的圖片,才會被轉(zhuǎn)化為base64圖片。

⑥打包處理js文件中的高級語法

⑴安裝babel轉(zhuǎn)換器相關(guān)的包:npm i babel-loader @babel/core @babel/runtime -D

(2)安裝babel語法插件相關(guān)的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

⑶在項(xiàng)目根目錄中,創(chuàng)建babel配置文件babel.config.js并初始化基本配置如下:

module.export = {

? ? presets : ['@babel/preset-env'],

? ? plugins: ['@babel/plugin-transform-runtime ', '@babel/plugin-proposal-class-properties ']

}

(4) 在webpack.config.js的module -> rules數(shù)組中,添加loader規(guī)則如下:

//exclude 為排除項(xiàng),表示babel-loader不需要處理node_modules 中的js文件

{test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}

三、Vue單文件組件

1.傳統(tǒng)組件的問題和解決方案

問題:

全局定義嗯組件必須保證組件的名稱不重復(fù)。

字符串模板缺乏語法高亮,在HTML有多行的時(shí)候,需要用到丑陋的\。

不支持CSS意味著當(dāng)HTML和JavaScript組件化時(shí),CSS明顯被遺漏。

沒有構(gòu)建步驟限制,只能使用HTML和ES5JavaScript,而不能使用預(yù)處理器(如babel)

解決方案:

針對傳統(tǒng)組件的問題,Vue提供了一個(gè)解決方案-使用Vue單文件組件。

2.Vue單文件組件的基本用法

單文件組件的組成結(jié)構(gòu)

template 組件的模板區(qū)域

script 業(yè)務(wù)邏輯區(qū)域

style 樣式區(qū)域

<template>

? 這里用于定義Vue組件的模塊內(nèi)容

</template>

<script>

? //這里用于定義Vue組件的業(yè)務(wù)邏輯

? export default {

? ? ? data :() {? return {}? },? //私有數(shù)據(jù)

? ? ? methods: {}? //處理函數(shù)

? ? ? //...其他業(yè)務(wù)邏輯

? }

</script>

<style scoped>

? 這里用于定義組件的樣式

</style>

3.webpack中配置的vue組件加載器

①運(yùn)行npm i vue-loader vue-template-compiler -D命令

②在webpack.config.js配置文件中,添加vue-loader的配置項(xiàng)如下:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

? ? module: {

? ? ? rules:[

? ? ? ? ? //...其他規(guī)則

? ? ? ? { test: /\.vue$/,loader: 'vue-loader' }

? ? ? ]

},

? plugins : [

? //...其他插件

? new VueLoaderPlugin() //請確保引入這個(gè)插件

? ]

}

4.在webpack項(xiàng)目中使用vue

①運(yùn)行npm i vue -S安裝vue

②在 src -> index.js入口文件中,通過import Vue from 'vue'? 來導(dǎo)入vue構(gòu)造函數(shù)

③創(chuàng)建vue的實(shí)例對象,并指定要控制的el 區(qū)域

④通過render函數(shù)渲染App根組件

//1.導(dǎo)入Vue構(gòu)造函數(shù)

import Vue from 'vue'

//2.導(dǎo)入App根組件

import App from './comonents/App.vue'

const vm = new Vue({

? ? //3.指定vm實(shí)例要控制的頁面區(qū)域

? el: '#app',

? //4.通過render函數(shù),把指定的組件渲染到 el 區(qū)域中

? ? render : h => h(App)

})

5.webpack打包發(fā)布

上線之前需要通過webpack將應(yīng)用進(jìn)行整體打包,通過package.json文件配置打包命令:

//在package.json文件中配置webpack打包命令

//該命令默認(rèn)加載項(xiàng)目根目錄中的webpack.config.js配置文件

"scripts": {

? ? //用于打包的命令

? ? "build" : "webpack -p",

? ? //用于開發(fā)調(diào)試的命令

? ? "dev" : "webpack-dev-server --open --host 127.0.0.1 --port 3000",

}

四、Vue腳手架

1.Vue腳手架的基本用法

Vue腳手架用于快速生成Vue項(xiàng)目基礎(chǔ)架構(gòu),其官網(wǎng)地址:? http://click.vuwjs.org/zh/

使用步驟:

①安裝3.x版本Vue腳手架

npm install -g @vue/cli

基于3.x版本的腳手架創(chuàng)建vue項(xiàng)目

//⑴基于交互式命令行 的方式,創(chuàng)建 新版 vue項(xiàng)目

vue create my-project

//⑵基于 圖形化界面的方式,創(chuàng)建 新版vue項(xiàng)目

vue ui

//⑶基于2.x的舊模板,創(chuàng)建 舊版vue項(xiàng)目

npm install -g @vue/cli-init

vue init webpack my-project

2.Vue腳手架生成的項(xiàng)目結(jié)構(gòu)分析

.git?

node_modules --------依賴包目錄

public-------靜態(tài)資源目錄

src------組件源碼目錄

.gitinore

babel.config.js ----babel配置文件

package.json

package-lock.json

README.md

3.Vue腳手架的自定義配置

①通過package.json配置項(xiàng)目

//必須是符合規(guī)范的json語法

"vue" : {

? ? "devServer" : {

? ? ? ? "port" : "8888",

? ? ? ? "open" : true

? ? ? }

}

注意:不推薦使用這種方式,因?yàn)閜ackage.json主要用來管理包的配置信息,為了方便維護(hù),推薦將vue腳手架相關(guān)的配置,單獨(dú)定義到vue.config.js配置文件中。

②通過單獨(dú)的配置文件配置項(xiàng)目

⑴在項(xiàng)目的根目錄創(chuàng)建文件vue.config.js

⑵在該文件中進(jìn)行相關(guān)配置,從而覆蓋男人嘛配置

//vue.config.js

module.exports = {

? devServer : {

? ? ? port : 8888

? }

}

五、Element-UI的基本使用

Element-UI:一套為開發(fā)者,設(shè)計(jì)師,和產(chǎn)品經(jīng)理準(zhǔn)備的基于vue 2.0的桌面端組件庫。

官網(wǎng)地址http://-cn.eleme.io/#/zh-CN

1.基于命令行方式手動安裝

①安裝依賴包npm i element-ui -S

②導(dǎo)入Element-UI相關(guān)資源

//導(dǎo)入組件庫

import ElementUI from 'element-ui';

//導(dǎo)入組件相關(guān)樣式

import 'element-ui/lib/theme-chalk/index.css';

//配置Vue插件

Vue.use(ElementUI);

2.基于圖形化界面自動安裝

①運(yùn)行vue ui命令,打開圖形化界面

②通過Vue項(xiàng)目管理器,進(jìn)入具體的項(xiàng)目配置面板

③點(diǎn)擊 插件 -> 添加插件,進(jìn)入插件查詢面板

④搜索vue-cli-plugin-element并安裝

⑤配置插件,實(shí)現(xiàn)按需導(dǎo)入,從而減少打包后項(xiàng)目的體積。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,115評論 3 423
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,577評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,514評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,234評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,621評論 1 326
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,641評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,822評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,380評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,128評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,319評論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,879評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,548評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,970評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,229評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,048評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,285評論 2 376