一、模塊化相關(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)目的體積。