一、傳統(tǒng)模塊化規(guī)范

Node.js 第九天的 線下筆記 中，詳細(xì)介紹了ES6模塊化規(guī)范，以及如何在 Node 中使用ES6模塊化規(guī)范岂嗓。

（1）AMD 和 CMD 適用于瀏覽器端的 Javascript 模塊化
（2）CommonJS 適用于服務(wù)器端的 Javascript 模塊化
（3）Node.js中使用的就是CommonJS 模塊化規(guī)范：
① 導(dǎo)入其它模塊使用 require() 方法
② 模塊對外共享成員使用 module.exports 對象

二、ES6 模塊化規(guī)范

1. ES6 模塊化規(guī)范的核心

① 每個 js 文件都是一個獨(dú)立的模塊
② 導(dǎo)入其它模塊成員使用 import 關(guān)鍵字
③ 向外共享模塊成員使用 export 關(guān)鍵字

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

（1）安裝babel

打開終端鹊碍，輸入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安裝完畢之后厌殉，再次輸入命令安裝：npm install --save @babel/polyfill
注意：如果npm安裝上述包不成功，就使用cnpm
但是需要安裝cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）配置babel
在項目目錄中創(chuàng)建babel.config.js文件妹萨。編輯js文件中的代碼如下：

const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
//暴露
module.exports = { presets }

（3）創(chuàng)建index.js文件

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

（4）使用npx執(zhí)行文件

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

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

注意：一個模塊中乎完，默認(rèn)導(dǎo)出只能用一次熏兄！

export default { 默認(rèn)導(dǎo)出的成員 } 加了花括號，導(dǎo)出的是對象形式的數(shù)據(jù)树姨。

或者export default 默認(rèn)導(dǎo)出的成員 不加花括號摩桶，導(dǎo)出的是數(shù)據(jù)本身。

let num1 = 10;
let num2 = 20;

function show() {
  console.log('默認(rèn)導(dǎo)出模塊的函數(shù)');
}

// 默認(rèn)導(dǎo)出
export default { num1, show }; //{ num1: 10, show: [Function: show] }

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

注意：導(dǎo)入自定義模塊時帽揪，必須以 ./ 開頭

import 自定義名字 from "模塊標(biāo)識符"

import wl from './1.默認(rèn)導(dǎo)出.js';
console.log(wl);

5. 按需導(dǎo)出

export 按需導(dǎo)出的成員

export let name = '吳磊';
export let hobby = '沖浪';
export function say() {
  console.log('你好');
}

6. 按需導(dǎo)入

注意：按需導(dǎo)入的名稱必須和按需導(dǎo)出的名稱一致硝清，但可以使用as關(guān)鍵字修改名稱。

import { } from "模塊標(biāo)識符"
import 默認(rèn)導(dǎo)入名字,{ } from '模塊標(biāo)識符

import moRen, { name, hobby as aihao, say } from './3.按需導(dǎo)出.js';

console.log('名字：' + name + ',愛好:' + aihao);
console.log('默認(rèn)導(dǎo)出的模塊' + moRen);

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

如果只想單純地執(zhí)行某個模塊中的代碼转晰，并不需要得到模塊中向外共享的成員芦拿。此時，可以直接導(dǎo)入并執(zhí)行模塊代碼查邢。

import "模塊標(biāo)識符"

import './5.被直接導(dǎo)入的模塊.js'

三蔗崎、webpack基本使用

1. 概念

webpack 是一個流行的前端項目構(gòu)建工具（打包工具），它提供了友好的模塊化支持扰藕，以及代碼壓縮混淆缓苛、處理 js 兼容問題、性能優(yōu)化等強(qiáng)大的功能邓深。

• -S：--save未桥，縮寫為-S笔刹，表示安裝的包將寫入package.json里面的dependencies
• -D：--save-dev，縮寫為-D冬耿，表示將安裝的包將寫入packege.json里面的devDependencies
• -g ：--global舌菜，縮寫為-g，表示安裝包時淆党，視作全局的包酷师。

2. webpack 的基本使用

① 運(yùn)行 npm install webpack webpack-cli –D 命令讶凉，安裝 webpack 相關(guān)的包染乌。

② 在項目根目錄中，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件懂讯。

③ 在 webpack 的配置文件中荷憋，初始化如下基本配置：

module.exports = {
 mode: 'development' // mode 用來指定構(gòu)建模式，開發(fā)模式：development褐望，產(chǎn)品發(fā)布：production
}

④ 在 package.json 配置文件中的 scripts 節(jié)點(diǎn)下勒庄，新增 dev 腳本如下：

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

⑤ 在終端中運(yùn)行 npm run dev 命令瘫里，啟動 webpack 進(jìn)行項目打包实蔽。

⑥ webpack把 main.js輸出文件 打包到了 dist 目錄下，之后就使用這里面的文件谨读。

3. 配置打包的入口與出口

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' // 輸出文件的名稱
 }
}

4.配置 webpack 的自動打包功能

① 運(yùn)行 npm install webpack-dev-server -D 命令，安裝支持項目自動打包的工具劳殖。

② 修改 package.json文件中铐尚，scripts 中的 dev 命令如下：

"scripts": {
 "dev": "webpack-dev-server" // script 節(jié)點(diǎn)下的腳本，可以通過 npm run 執(zhí)行
}

③ 在文件中引用 .js輸出文件 時哆姻，必須引用 【/ bundle.js】 宣增。因?yàn)樽詣哟虬ぞ甙汛虬玫奈募诺搅?項目的根目錄下。（千萬別少了 / ）

<script src="/bundle.js"></script>

④ 運(yùn)行 npm run dev 命令矛缨，重新進(jìn)行打包爹脾。

⑤ 在瀏覽器中訪問 http://localhost:8080 地址，查看自動打包效果箕昭。

注意：

• webpack-dev-server 會啟動一個實(shí)時打包的 http 服務(wù)器灵妨。
• webpack-dev-server 打包生成的輸出文件，默認(rèn)放到了項目根目錄中盟广，而且是虛擬的闷串、看不見的。
• 由于4.0版本的 webpack-cli包 和3.0版本的 webpack-dev-server包 不兼容筋量，所以只能把webpack-cli包 更換成3.0版本的烹吵。

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

如果安裝了 自動打包 工具后碉熄，雖然每次修改代碼能自動打包，但首次打開時還需要查找文件夾肋拔，很麻煩锈津。接下來實(shí)現(xiàn)：每次自動打包后，訪問文件所在網(wǎng)址凉蜂，可以直接看到頁面效果琼梆。

① 運(yùn)行 npm install html-webpack-plugin -D 命令，安裝生成預(yù)覽頁面的插件窿吩。

② 修改 webpack.config.js 文件頭部區(qū)域茎杂，添加如下配置信息：

// 導(dǎo)入生成預(yù)覽頁面的插件，得到一個構(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 打包期間會用到的一些插件列表
}

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

上一步配置轧邪，雖然可以在打開網(wǎng)址時刽脖，立刻看到頁面效果，但還是很麻煩忌愚。
接下來實(shí)現(xiàn)：每次啟動自動打包后曲管，不需要手動打開瀏覽器，直接跳轉(zhuǎn)到頁面效果硕糊。

package.json中的配置：

 // --open 打包完成后自動打開瀏覽器頁面
 // --host 配置 IP 地址
 // --port 配置端口
 "scripts": {
 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
 },

四院水、 webpack 中的加載器

1. loader加載器的作用

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

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

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

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

  
  
  捕獲.PNG

2. 打包處理 css 文件

① 運(yùn)行 npm i style-loader css-loader -D 命令胶逢，安裝處理 css 文件的 loader
② 在 webpack.config.js 文件的 module.exports 對象中厅瞎，添加 loader 規(guī)則如下：

// 所有第三方文件模塊的匹配規(guī)則
module.exports = {
 module: {
 rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]
 }
}

其中，test 表示匹配的文件類型初坠， use 表示對應(yīng)要調(diào)用的 loader和簸。

• use 數(shù)組中指定的 loader 順序是固定的
• 多個 loader 的調(diào)用順序是：從后往前調(diào)用

3. 打包處理 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'] }
 ]
 }

4. 打包處理 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'] }
 ]
 }

5. 配置 postCSS 自動添加 css 的兼容前綴

某些css樣式具有兼容性問題，下載并配置 postCSS爽柒，可以為css樣式自動添加兼容性前綴吴菠，解決兼容性問題。

① 運(yùn)行 npm i postcss-loader autoprefixer -D 命令
② 在項目根目錄中創(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'] }
 ]
 }

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

① 運(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' }
 ]
 }

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

① 安裝babel轉(zhuǎn)換器相關(guān)的包：
npm i babel-loader @babel/core @babel/runtime -D
② 安裝babel語法插件相關(guān)的包：
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
③ 在項目根目錄中，創(chuàng)建 babel 配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

④ 在 webpack.config.js文件中怎燥，找到 module對象中的 rules 數(shù)組瘫筐，添加 loader 規(guī)則如下：

// exclude 為排除項，表示 babel-loader 不需要處理 node_modules 中的 js 文件
 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

五刺覆、單文件組件 （重點(diǎn)）

單文件組件搭配路由使用严肪。單文件組件負(fù)責(zé)定義組件史煎，路由負(fù)責(zé)定義路由規(guī)則谦屑。

1. 問題

① 全局定義的組件必須保證組件的名稱不重復(fù)
② 字符串模板缺乏語法高亮，在 HTML 有多行的時候篇梭，需要用到丑陋的
③ 不支持 CSS 意味著當(dāng) HTML 和 JavaScript 組件化時氢橙，CSS 明顯被遺漏
④ 沒有構(gòu)建步驟限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用預(yù)處理器（如：Babel）

針對傳統(tǒng)組件的問題恬偷，Vue 提供了一個解決方案 —— 使用 Vue 單文件組件悍手。

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

創(chuàng)建一個 .vue 的文件，單文件組件的組成結(jié)構(gòu)：
① template 組件的模板區(qū)域
② script 業(yè)務(wù)邏輯區(qū)域
③ style 樣式區(qū)域

<template>
    <div>這里定義vue組件的模板內(nèi)容</div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    methods:{}
}
</script>

<style scoped>
div {
    color: red;
}
</style>

注意：
style添加 scoped 防止組件樣式之間的沖突問題袍患。
vue文件的代碼提示坦康，可以在vscode中安裝Vetur插件。

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

① 運(yùn)行 npm i vue-loader vue-template-compiler -D 命令
② 在 webpack.config.js 配置文件中诡延，添加 vue-loader加載器 的配置項如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 module: {
 rules: [
 // ... 其它規(guī)則
 { test: /\.vue$/, loader: 'vue-loader' }
 ]
 },
 plugins: [
 // ... 其它插件
 new VueLoaderPlugin() // 請確保引入這個插件滞欠！
 ]
}

4. 在webpack 中使用 vue單文件組件

① 在項目中下載 vue 的包。

npm i vue –S

② 在輸入文件 index.js 中肆良，導(dǎo)入 vue 包筛璧。

import Vue from 'vue'

③ 在輸入文件 index.js 中，導(dǎo)入 單文件組件惹恃。

④ 創(chuàng)建 vue 的實(shí)例對象夭谤，并指定要控制的 el 區(qū)域。

⑤ 在vue 的實(shí)例對象中巫糙，通過 render 函數(shù)朗儒，將組件掛載并渲染出來。

5. webpack 打包發(fā)布

上線之前需要通過webpack將應(yīng)用進(jìn)行整體打包，可以在 package.json 文件中的 scripts對象 里醉锄，添加如下命令：

"scripts": {
 // 用于打包的命令
 "build": "webpack -p",
}

然后運(yùn)行命令：npm run build 疲牵，會生成 .dist 文件夾。

六榆鼠、 腳手架 （重點(diǎn)）

Vue 腳手架就是一個 命令行工具纲爸，用于快速生成 Vue 項目基礎(chǔ)架構(gòu)。其官網(wǎng)地址為：https://cli.vuejs.org/zh/

1. 全局安裝vue腳手架

npm install -g @vue/cli

• 安裝了腳手架后妆够，就可以基于腳手架創(chuàng)建vue項目了识啦。

2. 基于 交互式命令行 的方式，創(chuàng)建 vue 項目（重點(diǎn)）

在命令行輸入：vue create 項目名稱

3. 基于圖形化界面創(chuàng)建vue項目（重點(diǎn)）

注意：使用vue ui 命令就能打開vue 的圖像化界面神妹。

在命令行輸入：vue ui

4. 基于2.x的舊模板創(chuàng)建舊版vue項目（幾近淘汰）

首先在要安裝一個包：npm install -g @vue/cli-init
然后輸入：vue init webpack 項目名稱

具體創(chuàng)建步驟颓哮，見 前端工程化-第六天 的線下筆記。

5. 啟動

創(chuàng)建完成后鸵荠，在vscode中打開項目文件夾冕茅，在終端里運(yùn)行 npm run serve 命令。

6. 對vue腳手架項目進(jìn)行自定義配置的兩種方式

（1）在 package.json 文件中添加配置信息蛹找。（不推薦）
（2）在根目錄下創(chuàng)建 vue.config.js 文件姨伤。在這個文件中的配置信息會覆蓋默認(rèn)配置信息。

module.exports = {
  devServer: {
    open: true, //啟動項目后庸疾，直接跳轉(zhuǎn)到顯示效果頁面
    port: 8888 //端口號
  }
};

（3）vue.config.js文件的核心就是webpack打包工具乍楚。vue-cli是基于nodejs+webpack封裝的命令行工具。
① build文件夾是webpack的配置文件夾届慈，如果使用了vue-cli腳手架則會用vue.config.js文件替代徒溪。
② config文件是我們自己加的配置文件，只是把webpack配置參數(shù)單獨(dú)寫出了金顿。
③ dist文件是打包文件臊泌。

image.png

七、組件庫 Element-UI （重點(diǎn)）

官網(wǎng)：https://element.eleme.cn/#/zh-CN
Element-UI是一套為開發(fā)者揍拆、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue 2.0的桌面端組件庫渠概，它提供了豐富的組件，設(shè)計非常美觀礁凡，我們可以直接拿來用高氮，這樣可以省去很多樣式編寫時間，讓我們更加專注邏輯代碼顷牌。

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

① 在項目的命令行安裝依賴包

npm install element-ui -S

② 在打包入口文件：main.js 中導(dǎo)入Element-UI的相關(guān)資源

// 手動配置Element-UI
// 導(dǎo)入Element-UI組件庫
import ElementUI from "element-ui";
// 導(dǎo)入組件庫的相關(guān)css樣式
import "element-ui/lib/theme-chalk/index.css";
// 配置vue插件啊
Vue.use(ElementUI);

③ 啟動項目：npm run serve

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

① 在命令行運(yùn)行 vue ui 命令剪芍，打開vue的圖形化界面油啤。

② 通過 vue項目管理器 购公，進(jìn)入具體的項目配置面板欺栗。

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

④ 搜索 vue-cli-plugin-element 并安裝侵俗。

⑤ 在 配置插件 中蚓哩，實(shí)現(xiàn)按需導(dǎo)入尘应，從而減少打包后的項目體積。

配置完成后峡继，就可以去ElementUI官網(wǎng)上復(fù)制代碼使用了冯袍。
注意：用腳手架搭建的項目，其入口文件是 main.js

八 碾牌、vscode 格式化代碼

配置完成后康愤，保存代碼會自動格式化為 ESlint 的規(guī)范。
（1）在vscode中安裝下面三個插件舶吗。

111111111.PNG

（2）在設(shè)置里面征冷，找到 json 配置文件，添加下面的代碼誓琼。

1111111111.png

注意＜旒ぁ！腹侣！是在原來配置對象里面追加如下配置代碼叔收，注意格式：

"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ],
"vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 80,
      // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
      "wrap_attributes": "force-expand-multiline"
    }
  },
  "editor.tabSize": 2,
  "vetur.validation.template": false,
  "git.ignoreLimitWarning": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.confirmSync": false,
  "eslint.quiet": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceAfterConstructor": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.preferences.quoteStyle": "single",
  "javascript.format.insertSpaceAfterConstructor": true,
  "typescript.preferences.quoteStyle": "single",
  "html.format.wrapAttributes": "force-expand-multiline",
  "editor.formatOnSave": true,
  "prettier.vueIndentScriptAndStyle": true,
  "prettier.singleQuote": true,
  "prettier.useTabs": true,
  "prettier.printWidth": 100,
  "eslint.workingDirectories": [
    ".eslintrc.js",
    {
      "mode": "auto"
    }
  ]

九、生成vue基本結(jié)構(gòu)

https://www.cnblogs.com/youmingkuang/p/14926256.html