1.模塊化的分類

A.瀏覽器端的模塊化

    1).AMD(Asynchronous Module Definition,異步模塊定義)
    代表產(chǎn)品為：Require.js
    2).CMD(Common Module Definition,通用模塊定義)
    代表產(chǎn)品為：Sea.js

B.服務(wù)器端的模塊化

    服務(wù)器端的模塊化規(guī)范是使用CommonJS規(guī)范：
    1).使用require引入其他模塊或者包
    2).使用exports或者module.exports導(dǎo)出模塊成員
    3).一個(gè)文件就是一個(gè)模塊，都擁有獨(dú)立的作用域

C.ES6模塊化

    ES6模塊化規(guī)范中定義：
        1).每一個(gè)js文件都是獨(dú)立的模塊
        2).導(dǎo)入模塊成員使用import關(guān)鍵字
        3).暴露模塊成員使用export關(guān)鍵字

小結(jié)：推薦使用ES6模塊化，因?yàn)锳MD，CMD局限使用與瀏覽器端，而CommonJS在服務(wù)器端使用。
ES6模塊化是瀏覽器端和服務(wù)器端通用的規(guī)范.

2.在NodeJS中安裝babel

A.安裝babel

打開終端，輸入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安裝完畢之后，再次輸入命令安裝：npm install --save @babel/polyfill

B.創(chuàng)建babel.config.js

在項(xiàng)目目錄中創(chuàng)建babel.config.js文件。
編輯js文件中的代碼如下：
    const presets = [
        ["@babel/env",{
            targets:{
                edge:"17",
                firefox:"60",
                chrome:"67",
                safari:"11.1"
            }
        }]
    ]
    //暴露
    module.exports = { presets }

C.創(chuàng)建index.js文件

在項(xiàng)目目錄中創(chuàng)建index.js文件作為入口文件
在index.js中輸入需要執(zhí)行的js代碼，例如：
    console.log("ok");

D.使用npx執(zhí)行文件

打開終端，輸入命令：npx babel-node ./index.js

3.設(shè)置默認(rèn)導(dǎo)入/導(dǎo)出

A.默認(rèn)導(dǎo)出

export default {
    成員A,
    成員B,
    .......
},如下：
let num = 100;
export default{
    num
}

B.默認(rèn)導(dǎo)入

import 接收名稱 from "模塊標(biāo)識(shí)符"，如下：
import test from "./test.js"

注意：在一個(gè)模塊中，只允許使用export default向外默認(rèn)暴露一次成員，千萬不要寫多個(gè)export default。
如果在一個(gè)模塊中沒有向外暴露成員，其他模塊引入該模塊時(shí)將會(huì)得到一個(gè)空對(duì)象

4.設(shè)置按需導(dǎo)入/導(dǎo)出

A.按需導(dǎo)出

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

B.按需導(dǎo)入

import { num,fn as printFn ,myName } from "./test.js"
//同時(shí)導(dǎo)入默認(rèn)導(dǎo)出的成員以及按需導(dǎo)入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一個(gè)模塊中既可以按需導(dǎo)入也可以默認(rèn)導(dǎo)入，一個(gè)模塊中既可以按需導(dǎo)出也可以默認(rèn)導(dǎo)出

5.直接導(dǎo)入并執(zhí)行代碼

import "./test2.js";

6.webpack的概念

webpack是一個(gè)流行的前端項(xiàng)目構(gòu)建工具，可以解決目前web開發(fā)的困境。
webpack提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優(yōu)化等特性，提高了開發(fā)效率和項(xiàng)目的可維護(hù)性

7.webpack的基本使用

A.創(chuàng)建項(xiàng)目目錄并初始化

創(chuàng)建項(xiàng)目，并打開項(xiàng)目所在目錄的終端，輸入命令：
    npm init -y

B.創(chuàng)建首頁(yè)及js文件

在項(xiàng)目目錄中創(chuàng)建index.html頁(yè)面，并初始化頁(yè)面結(jié)構(gòu)：在頁(yè)面中擺放一個(gè)ul，ul里面放置幾個(gè)li
在項(xiàng)目目錄中創(chuàng)建js文件夾，并在文件夾中創(chuàng)建index.js文件

C.安裝jQuery

打開項(xiàng)目目錄終端，輸入命令:
npm install jQuery -S

D.導(dǎo)入jQuery

打開index.js文件，編寫代碼導(dǎo)入jQuery并實(shí)現(xiàn)功能：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注意：此時(shí)項(xiàng)目運(yùn)行會(huì)有錯(cuò)誤，因?yàn)閕mport $ from "jquery";這句代碼屬于ES6的新語法代碼，在瀏覽器中可能會(huì)存在兼容性問題
所以我們需要webpack來幫助我們解決這個(gè)問題。

E.安裝webpack

1).打開項(xiàng)目目錄終端，輸入命令:
npm install webpack webpack-cli -D
2).然后在項(xiàng)目根目錄中，創(chuàng)建一個(gè) webpack.config.js 的配置文件用來配置webpack
在 webpack.config.js 文件中編寫代碼進(jìn)行webpack配置，如下：
module.exports = {
    mode:"development"http://可以設(shè)置為development(開發(fā)模式)，production(發(fā)布模式)
}
補(bǔ)充：mode設(shè)置的是項(xiàng)目的編譯模式。
如果設(shè)置為development則表示項(xiàng)目處于開發(fā)階段，不會(huì)進(jìn)行壓縮和混淆，打包速度會(huì)快一些
如果設(shè)置為production則表示項(xiàng)目處于上線發(fā)布階段，會(huì)進(jìn)行壓縮和混淆，打包速度會(huì)慢一些
3).修改項(xiàng)目中的package.json文件添加運(yùn)行腳本dev，如下：
"scripts":{
    "dev":"webpack"
}
注意：scripts節(jié)點(diǎn)下的腳本，可以通過 npm run 運(yùn)行，如：
運(yùn)行終端命令：npm run dev
將會(huì)啟動(dòng)webpack進(jìn)行項(xiàng)目打包
4).運(yùn)行dev命令進(jìn)行項(xiàng)目打包，并在頁(yè)面中引入項(xiàng)目打包生成的js文件
打開項(xiàng)目目錄終端，輸入命令:
npm run dev
等待webpack打包完畢之后，找到默認(rèn)的dist路徑中生成的main.js文件，將其引入到html頁(yè)面中。
瀏覽頁(yè)面查看效果。

8.設(shè)置webpack的打包入口/出口

在webpack 4.x中，默認(rèn)會(huì)將src/index.js 作為默認(rèn)的打包入口js文件
                 默認(rèn)會(huì)將dist/main.js 作為默認(rèn)的打包輸出js文件
如果不想使用默認(rèn)的入口/出口js文件，我們可以通過改變 webpack.config.js 來設(shè)置入口/出口的js文件，如下：
const path = require("path");
module.exports = {
    mode:"development",
    //設(shè)置入口文件路徑
    entry: path.join(__dirname,"./src/xx.js"),
    //設(shè)置出口文件
    output:{
        //設(shè)置路徑
        path:path.join(__dirname,"./dist"),
        //設(shè)置文件名
        filename:"res.js"
    }
}

9.設(shè)置webpack的自動(dòng)打包

默認(rèn)情況下，我們更改入口js文件的代碼，需要重新運(yùn)行命令打包webpack，才能生成出口的js文件
那么每次都要重新執(zhí)行命令打包，這是一個(gè)非常繁瑣的事情，那么，自動(dòng)打包可以解決這樣繁瑣的操作。
實(shí)現(xiàn)自動(dòng)打包功能的步驟如下：
    A.安裝自動(dòng)打包功能的包:webpack-dev-server
        npm install webpack-dev-server -D
    B.修改package.json中的dev指令如下：
        "scripts":{
            "dev":"webpack-dev-server"
        }
    C.將引入的js文件路徑更改為：<script src="/bundle.js"></script>
    D.運(yùn)行npm run dev，進(jìn)行打包
    E.打開網(wǎng)址查看效果：http://localhost:8080

注意：webpack-dev-server自動(dòng)打包的輸出文件，默認(rèn)放到了服務(wù)器的根目錄中.

補(bǔ)充：
在自動(dòng)打包完畢之后，默認(rèn)打開服務(wù)器網(wǎng)頁(yè)，實(shí)現(xiàn)方式就是打開package.json文件，修改dev命令：
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

10.配置html-webpack-plugin

使用html-webpack-plugin 可以生成一個(gè)預(yù)覽頁(yè)面。
因?yàn)楫?dāng)我們?cè)L問默認(rèn)的 http://localhost:8080/的時(shí)候，看到的是一些文件和文件夾，想要查看我們的頁(yè)面
還需要點(diǎn)擊文件夾點(diǎn)擊文件才能查看，那么我們希望默認(rèn)就能看到一個(gè)頁(yè)面，而不是看到文件夾或者目錄。
實(shí)現(xiàn)默認(rèn)預(yù)覽頁(yè)面功能的步驟如下：
    A.安裝默認(rèn)預(yù)覽功能的包:html-webpack-plugin
        npm install html-webpack-plugin -D
    B.修改webpack.config.js文件，如下：
        //導(dǎo)入包
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        //創(chuàng)建對(duì)象
        const htmlPlugin = new HtmlWebpackPlugin({
            //設(shè)置生成預(yù)覽頁(yè)面的模板文件
            template:"./src/index.html",
            //設(shè)置生成的預(yù)覽頁(yè)面名稱
            filename:"index.html"
        })
    C.繼續(xù)修改webpack.config.js文件，添加plugins信息：
        module.exports = {
            ......
            plugins:[ htmlPlugin ]
        }

11.webpack中的加載器

通過loader打包非js模塊：默認(rèn)情況下，webpack只能打包js文件，如果想要打包非js文件，需要調(diào)用loader加載器才能打包
    loader加載器包含：
        1).less-loader
        2).sass-loader
        3).url-loader:打包處理css中與url路徑有關(guān)的文件
        4).babel-loader:處理高級(jí)js語法的加載器
        5).postcss-loader
        6).css-loader,style-loader

注意：指定多個(gè)loader時(shí)的順序是固定的，而調(diào)用loader的順序是從后向前進(jìn)行調(diào)用

A.安裝style-loader,css-loader來處理樣式文件
    1).安裝包
        npm install style-loader css-loader -D
    2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設(shè)置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }
B.安裝less,less-loader處理less文件
    1).安裝包
        npm install less-loader less -D
    2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設(shè)置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
C.安裝sass-loader,node-sass處理less文件
    1).安裝包
        npm install sass-loader node-sass -D
    2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設(shè)置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

    補(bǔ)充：安裝sass-loader失敗時(shí)，大部分情況是因?yàn)榫W(wǎng)絡(luò)原因，詳情參考：
    https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

D.安裝post-css自動(dòng)添加css的兼容性前綴（-ie-,-webkit-）
1).安裝包
    npm install postcss-loader autoprefixer -D
2).在項(xiàng)目根目錄創(chuàng)建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
3).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設(shè)置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調(diào)用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

E.打包樣式表中的圖片以及字體文件
在樣式表css中有時(shí)候會(huì)設(shè)置背景圖片和設(shè)置字體文件，一樣需要loader進(jìn)行處理
使用url-loader和file-loader來處理打包圖片文件以及字體文件
1).安裝包
    npm install url-loader file-loader -D
2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設(shè)置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調(diào)用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設(shè)置字節(jié)數(shù)，只有小于limit值的圖片，才會(huì)轉(zhuǎn)換
                //為base64圖片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

F.打包js文件中的高級(jí)語法：在編寫js的時(shí)候，有時(shí)候我們會(huì)使用高版本的js語法
有可能這些高版本的語法不被兼容，我們需要將之打包為兼容性的js代碼
我們需要安裝babel系列的包
A.安裝babel轉(zhuǎn)換器
    npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在項(xiàng)目根目錄創(chuàng)建并配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設(shè)置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調(diào)用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設(shè)置字節(jié)數(shù)，只有小于limit值的圖片，才會(huì)轉(zhuǎn)換
                //為base64圖片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude為排除項(xiàng)，意思是不要處理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

12.Vue單文件組件

傳統(tǒng)Vue組件的缺陷：
全局定義的組件不能重名，字符串模板缺乏語法高亮，不支持css(當(dāng)html和js組件化時(shí)，css沒有參與其中)
沒有構(gòu)建步驟限制，只能使用H5和ES5，不能使用預(yù)處理器（babel）
解決方案：
使用Vue單文件組件，每個(gè)單文件組件的后綴名都是.vue
每一個(gè)Vue單文件組件都由三部分組成
1).template組件組成的模板區(qū)域
2).script組成的業(yè)務(wù)邏輯區(qū)域
3).style樣式區(qū)域

代碼如下：

<template>

    組件代碼區(qū)域

</template>

<script>

    js代碼區(qū)域

</script>

<style scoped>

    樣式代碼區(qū)域

</style>

補(bǔ)充：安裝Vetur插件可以使得.vue文件中的代碼高亮

配置.vue文件的加載器
A.安裝vue組件的加載器
npm install vue-loader vue-template-compiler -D
B.配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
...//其他規(guī)則
{
test:/.vue$/,
loader:"vue-loader",

            }
        ]
    }
}

13.在webpack中使用vue

上一節(jié)我們安裝處理了vue單文件組件的加載器，想要讓vue單文件組件能夠使用，我們必須要安裝vue
并使用vue來引用vue單文件組件。
A.安裝Vue
npm install vue -S
B.在index.js中引入vue：import Vue from "vue"
C.創(chuàng)建Vue實(shí)例對(duì)象并指定el，最后使用render函數(shù)渲染單文件組件
const vm = new Vue({
el:"#first",
render:h=>h(app)
})

14.使用webpack打包發(fā)布項(xiàng)目

在項(xiàng)目上線之前，我們需要將整個(gè)項(xiàng)目打包并發(fā)布。
A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}
B.在項(xiàng)目打包之前，可以將dist目錄刪除，生成全新的dist目錄

15.Vue腳手架

Vue腳手架可以快速生成Vue項(xiàng)目基礎(chǔ)的架構(gòu)。
A.安裝3.x版本的Vue腳手架：
npm install -g @vue/cli
B.基于3.x版本的腳手架創(chuàng)建Vue項(xiàng)目：
1).使用命令創(chuàng)建Vue項(xiàng)目
命令：vue create my-project
選擇Manually select features(選擇特性以創(chuàng)建項(xiàng)目)
勾選特性可以用空格進(jìn)行勾選。
是否選用歷史模式的路由：n
ESLint選擇：ESLint + Standard config
何時(shí)進(jìn)行ESLint語法校驗(yàn)：Lint on save
babel，postcss等配置文件如何放置：In dedicated config files(單獨(dú)使用文件進(jìn)行配置)
是否保存為模板：n
使用哪個(gè)工具安裝包：npm
2).基于ui界面創(chuàng)建Vue項(xiàng)目
命令：vue ui
在自動(dòng)打開的創(chuàng)建項(xiàng)目網(wǎng)頁(yè)中配置項(xiàng)目信息。
3).基于2.x的舊模板，創(chuàng)建Vue項(xiàng)目
npm install -g @vue/cli-init
vue init webpack my-project

C.分析Vue腳手架生成的項(xiàng)目結(jié)構(gòu)
node_modules:依賴包目錄
public：靜態(tài)資源目錄
src：源碼目錄
src/assets:資源目錄
src/components：組件目錄
src/views:視圖組件目錄
src/App.vue:根組件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:

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

A.通過 package.json 進(jìn)行配置 [不推薦使用]
    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }
B.通過單獨(dú)的配置文件進(jìn)行配置，創(chuàng)建vue.config.js
    module.exports = {
        devServer:{
            port:8888,
            open:true
        }
    }

17.Element-UI的基本使用

Element-UI:一套基于2.0的桌面端組件庫(kù)
官網(wǎng)地址：http://element-cn.eleme.io/#/zh-CN
A.安裝：
npm install element-ui -S
B.導(dǎo)入使用：
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI)