一、模塊化相關規范
1.模塊化概述
傳統開發模式的主要問題:
命名沖突，文件依賴
通過模塊化解決上述問題:
模塊化就是把單獨的一個功能封裝到一個模塊(文件)中，模塊之間相互隔離，但是可以通過特定的接口公開內部成員，也可以依賴別的模塊。
模塊化開發的好處:方便代碼重用，從而提升開發效率，并且方便后期的維護。
2.瀏覽器端模塊化規范
①AMD
Require.js (http://www.requirejs.cn/)
②CMD
Sea.js (http://seajs.github.io/seajs/docs/)
3.服務器端模塊化規范
①CommonJS
模塊化分為單文件模塊與包
模塊成員導出:module.exports和exports
模塊成員導入:require('模塊標識符')
4.大一統的模塊化規范-ES6模塊化
在ES6模塊化規范誕生之前，JavaScript社區已經嘗試并提出了AMD, CMD,CommonJS等模塊化規范。
但是，這些社區提出的模塊化標準，還是存在一定的差異性與局限性，并不是瀏覽器與服務器通用的模塊化標準，例如
AMD和CMD適用于瀏覽器端的JavaScript模塊化。
CommonJS適用于服務器端的JavaScript模塊化
因此，ES6語法規范中，在語言層面上定義了ES6模塊化規范，是瀏覽器端與服務器端通用的模塊化開發規范。
ES6模塊化規范中的定義:
每個js文件都是一個獨立的模塊
導入模塊成員使用import關鍵字
暴露模塊成員使用exolport關鍵字
①Node.js中通過babel體驗ES6模塊化
⑴npm install --save-dev @babel/core @babel/click @babel/preset-env @babel/node
⑵npm install --save @babel/polyfill
(3)項目根目錄創建文件 babel.config.js
(4)babel.config.js文件內容如下面代碼
const presets = [
? ? ["@babel/env", {
? ? ? ? targets : {
? ? ? ? edge: "17",
? ? ? ? firefox : "60",
? ? ? ? chrome : "67",
? ? ? ? safari : "11.1"
? ? ? ? }
? ? }]
];
module.exports = { presets };
⑸通過npx babel-node index.js執行代碼
5.ES6模塊化的基本語法
①默認導出與默認導入
默認導出語法: export default 默認導出的成員
默認導入語法: import 接收名稱 from '模塊標識符'
//導入模塊成員
import m1 from './m1.js'
console.log(m1);
//打印輸出的結果為:
// {a:10,c:20,show:[Function:show]}
//當前文件為m1.js
//定義私有成員a和c
let a = 10
let c = 20
//外界訪問不到變量d，因為它沒有暴露出去
let d = 30
function show () {
? ? ? //將本模塊中的私有成員暴露出去，供其他模塊使用
export default {
? ? a,
? ? c,
? ? show
}
注意:每個模塊中，只允許使用唯一的一次 export default,否則會報錯。
②按需導出與按需導入
按需導出語法: export let s1 = 10
按需導入語法: import { s1 } from '模塊標識符'
//導入模塊成員
import { s1,s2 as ss2,say} from './m1.js'
console.log(s1)//aaa
console.log(ss2)//ccc
console.log(say)//[Function : say]
//當前文件模塊為m1.js
//向外按需導出變量s1,s2,say
export let s1 = 'aaa'
export let s2 = 'ccc'
export function say = function () {}
注意:每個模塊中，可以使用多次按需導出
③直接導入并執行模塊代碼
有時候，我們只想單純執行某個模塊中的代碼，并不需要得到模塊中向外暴露的成員，此時，可以直接導入并執行模塊代碼。
//直接導入并執行模塊代碼
import './m2.js'
//當前文件模塊m2.js
//在當前模塊中執行一個for循環操作
for(let i = 0; i < 3; i++) {
? ? consol.log(i)
}
二、webpack
1.當前web開發面臨的問題
文件依賴關系錯綜復雜
靜態資源請求效率低
模塊化支持不友好
瀏覽器對高級JavaScript特性兼容程度較低
etc...
2.webpack概述
webpack是一個流行的前端項目構建工具(打包工具)，可以解決當前web開發中所面臨的困境。
webpack提供了友好的模塊化支持，以及代碼壓縮混淆，處理js兼容問題，性能優化等強大的功能，從而讓程序員把工作的重心放到具體的功能實現上，提高了開發效率和項目的可維護性。
目前大多數企業中的前端項目，都是基于webpack進行打包構建的。
webpack的基本使用:
①創建列表隔行變色項目
⑴新建項目空白目錄，并運行 npm init -y命令，初始化包管理配置文件package.json
⑵新建src源代碼目錄
⑶新建src -> index.html首頁
⑷初始化首頁基本的結構
⑸運行 npm install jQuery -S命令，安裝jQuery
(6)通過模塊化的形式，實現列表隔行變色效果
②在項目中安裝和配置webpack
⑴運行 npm install webpack-cli -D命令，安裝webpack相關的包
⑵在項目根目錄中，窗簾名為webpack.config.js的webpack配置文件
⑶在webpack的配置文件中，初始化如下基本配置:
module.exports = {
? ? mode : 'development' //mode用來指定構建模式
}
⑷在package的配置文件中scripts節點下，新增dev腳本如下:
"scripts": {
? ? "dev" : "webpack" //script節點下的腳本，可以通過npm run 執行
}
⑸在終端中運行npm run dev命令，啟動webpack進行項目打包。
③配置打包的入口與出口
webpack的4.x版本中默認約定:
打包的入口文件為src -> index.js
打包的輸出文件為dist ->main.js
如果要修改打包的入口與出口，可以在webpack.config.js中新增如下配置信息:
const path = require('path')//導入node.js中專門操作路徑的模塊
module.exports = {
? entry : path.join(__dirname, './src/index.js') //打包入口文件的路徑
output: {
? path: path.join(__dirname, './dist'),//輸出文件存放路徑
? filename: 'bundle.js' //輸出文件的名稱
? }
}
④配置webpack的基本使用
⑴運行npm install webpack-dev-server -D命令，安裝支持項目自動打包的工具
⑵修改package.json -> scripts中的dev命令如下:
"scripts" : {
? ? "dev": "webpack-dev-server" //script節點下的腳本，可以通過npm run運行
⑶將src -> index.html中，script腳本的引用路徑，修改為"/buldel.js"
⑷運行npm run dev 命令重新進行打包
⑸在瀏覽器中訪問http://localhost:8080地址，查看自動打包效果
注意:webpack-dev-server會啟動一個實時打包的http服務器
webpack-dev-server 打包生成的輸出文件，默認放到了項目根目錄中，而且是虛擬的，看不見的。
⑤配置html-webpack-plugin生成預覽頁面
⑴運行npm install html-webpack-plugin -D命令，安裝生成預覽頁面的插件
⑵修改webpack.config.js文件頭部區域，添加如下配置信息
//導入生成預覽頁面的插件，得到一個構造函數
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({//創建插件的實例對象
? ? template:'./src/index.html',//指定要用到的模板文件
? ? filename : 'index.html'? //指定生成的文件的名稱，該文件存在于內存中，在目錄中不顯示
})
⑶修改webpack.config.js文件中向外暴露的配置對象，新增如下配置節點:
module.exports = {
? ? plugins: [ htmlPlugin] //plugins數組是webpack打包期間會用到的一些插件列表
}
⑥配置自動打包相關的參數
//package.json中的配置
//--open 打包完成后自動打開瀏覽器頁面
//--host配置IP地址
//--port配置端口
"scripts": {
? ? "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
3.webpack中的加載器
①通過loader打包非js模塊
在實際開發過程中，webpack默認只能打包處理以.js后綴名結尾的模塊，其他非.js后綴名結尾的模塊，webpack默認處理不了，需要調用loader加載器才可以正常打包，否則會報錯。
loader加載器可以協助webpack打包處理特定的文件模塊，比如:
less-loader可以打包處理.less相關的文件
sass-loader可以打包處理.scss相關的文件
url-loader可以打包處理css中的url路徑相關的文件。
②loader的調用過程
將要被webpack打包處理的文件模塊-是否為js模塊，
4.webpack中加載器的基本使用
CSS
LESS
SCSS
PostCSS
JavaScript
Image/Font
Vue
①打包處理css文件
⑴運行npm i style-loader css-loader -D命令，安裝處理css 文件的loader
⑵在webpack.config.js的module -> rules數組中，添加loader規則如下:
//所有第三方文件模塊的匹配規則
module: {
? ? rules : [
? ? ? { test : /\.css$/, use : ['style-loader','css-loader']}
? ? ]
}
其中，test表示匹配的文件類型，use表示對應要調用的loader
注意:
use數組中指定的loader順序是固定的
多個loader的調用順序是:從后往前調用。
②打包處理less文件
⑴運行npm i less-loader less -D命令
⑵在webpack.config.js的module -> rules數組中，添加loader規則如下:
//所有第三方文件模塊的匹配規則
module: {
? rules:[
? ? { test: /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']}
? ]
}
③打包處理scss文件
⑴運行npm i sass-loader node-sass -D命令
⑵在webpack.config.js的module -> rules數組中，添加loader規則如下:
//所有第三方文件模塊的匹配規則
module: {
? rules:[
? ? { test: /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader']}
? ]
}
④配置postCss自動添加css的兼容前綴
⑴運行npm i postcss-loader autoprefixer -D命令
⑵在項目根目錄中創建postcss的配置文件postcss.config.js,并初始化如下配置:
const autoprefixer = require('autoprefixer') //導入自動添加前綴的插件
module.exports = {
? plugins: [autoprefixer]? //掛載插件
}
⑶在webpack.config.js的module -> rules 數組中，修改css 的loader規則如下:
module: {
? rules:[
? ? { test: /\.css$/, use : ['style-loader', 'css-loader', 'postcss-loader']}
? ]
}
⑤打包樣式表中的圖片和字體文件
⑴運行 npm i url-loader file-loader -D命令
⑵在webpack.config.js的 module -> rules數組中，添加loader規則如下:
module: {
? rules: [
? ? ? {
? ? ? ? test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
? ? ? ? use: 'url-loader?limit=16940'
? ? ? }
? ]
}
其中?之后的是loader的參數項。limit用來指定圖片的大小，單位是字節byte,只有小于limit大小的圖片，才會被轉化為base64圖片。
⑥打包處理js文件中的高級語法
⑴安裝babel轉換器相關的包:npm i babel-loader @babel/core @babel/runtime -D
(2)安裝babel語法插件相關的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
⑶在項目根目錄中，創建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數組中，添加loader規則如下:
//exclude 為排除項，表示babel-loader不需要處理node_modules 中的js文件
{test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}
三、Vue單文件組件
1.傳統組件的問題和解決方案
問題:
全局定義嗯組件必須保證組件的名稱不重復。
字符串模板缺乏語法高亮，在HTML有多行的時候，需要用到丑陋的\。
不支持CSS意味著當HTML和JavaScript組件化時，CSS明顯被遺漏。
沒有構建步驟限制，只能使用HTML和ES5JavaScript,而不能使用預處理器(如babel)
解決方案:
針對傳統組件的問題，Vue提供了一個解決方案-使用Vue單文件組件。
2.Vue單文件組件的基本用法
單文件組件的組成結構
template 組件的模板區域
script 業務邏輯區域
style 樣式區域
<template>
? 這里用于定義Vue組件的模塊內容
</template>
<script>
? //這里用于定義Vue組件的業務邏輯
? export default {
? ? ? data :() {? return {}? },? //私有數據
? ? ? methods: {}? //處理函數
? ? ? //...其他業務邏輯
? }
</script>
<style scoped>
? 這里用于定義組件的樣式
</style>
3.webpack中配置的vue組件加載器
①運行npm i vue-loader vue-template-compiler -D命令
②在webpack.config.js配置文件中，添加vue-loader的配置項如下:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
? ? module: {
? ? ? rules:[
? ? ? ? ? //...其他規則
? ? ? ? { test: /\.vue$/,loader: 'vue-loader' }
? ? ? ]
},
? plugins : [
? //...其他插件
? new VueLoaderPlugin() //請確保引入這個插件
? ]
}
4.在webpack項目中使用vue
①運行npm i vue -S安裝vue
②在 src -> index.js入口文件中，通過import Vue from 'vue'? 來導入vue構造函數
③創建vue的實例對象，并指定要控制的el 區域
④通過render函數渲染App根組件
//1.導入Vue構造函數
import Vue from 'vue'
//2.導入App根組件
import App from './comonents/App.vue'
const vm = new Vue({
? ? //3.指定vm實例要控制的頁面區域
? el: '#app',
? //4.通過render函數，把指定的組件渲染到 el 區域中
? ? render : h => h(App)
})
5.webpack打包發布
上線之前需要通過webpack將應用進行整體打包，通過package.json文件配置打包命令:
//在package.json文件中配置webpack打包命令
//該命令默認加載項目根目錄中的webpack.config.js配置文件
"scripts": {
? ? //用于打包的命令
? ? "build" : "webpack -p",
? ? //用于開發調試的命令
? ? "dev" : "webpack-dev-server --open --host 127.0.0.1 --port 3000",
}
四、Vue腳手架
1.Vue腳手架的基本用法
Vue腳手架用于快速生成Vue項目基礎架構，其官網地址:? http://click.vuwjs.org/zh/
使用步驟:
①安裝3.x版本Vue腳手架
npm install -g @vue/cli
基于3.x版本的腳手架創建vue項目
//⑴基于交互式命令行 的方式，創建 新版 vue項目
vue create my-project
//⑵基于 圖形化界面的方式，創建 新版vue項目
vue ui
//⑶基于2.x的舊模板，創建 舊版vue項目
npm install -g @vue/cli-init
vue init webpack my-project
2.Vue腳手架生成的項目結構分析
.git?
node_modules --------依賴包目錄
public-------靜態資源目錄
src------組件源碼目錄
.gitinore
babel.config.js ----babel配置文件
package.json
package-lock.json
README.md
3.Vue腳手架的自定義配置
①通過package.json配置項目
//必須是符合規范的json語法
"vue" : {
? ? "devServer" : {
? ? ? ? "port" : "8888",
? ? ? ? "open" : true
? ? ? }
}
注意:不推薦使用這種方式，因為package.json主要用來管理包的配置信息，為了方便維護，推薦將vue腳手架相關的配置，單獨定義到vue.config.js配置文件中。
②通過單獨的配置文件配置項目
⑴在項目的根目錄創建文件vue.config.js
⑵在該文件中進行相關配置，從而覆蓋男人嘛配置
//vue.config.js
module.exports = {
? devServer : {
? ? ? port : 8888
? }
}
五、Element-UI的基本使用
Element-UI:一套為開發者，設計師，和產品經理準備的基于vue 2.0的桌面端組件庫。
官網地址http://-cn.eleme.io/#/zh-CN
1.基于命令行方式手動安裝
①安裝依賴包npm i element-ui -S
②導入Element-UI相關資源
//導入組件庫
import ElementUI from 'element-ui';
//導入組件相關樣式
import 'element-ui/lib/theme-chalk/index.css';
//配置Vue插件
Vue.use(ElementUI);
2.基于圖形化界面自動安裝
①運行vue ui命令，打開圖形化界面
②通過Vue項目管理器，進入具體的項目配置面板
③點擊 插件 -> 添加插件，進入插件查詢面板
④搜索vue-cli-plugin-element并安裝
⑤配置插件，實現按需導入，從而減少打包后項目的體積。
