1.1 模塊化的相關規范

傳統開發模式的主要問題

image.png

命名沖突：多個js文件中的同名變量會沖突

文件依賴：js文件之間無法相互引用問題

通過模塊化解決上述問題

image.png

1.1.2 瀏覽器模塊化規范

image.png

這兩個模塊化規范，已經落伍，我們不再學習

1.1.3 服務器端模塊化規范

image.png

瀏覽器和服務器都有各自的模塊化規范

但是還不統一，我們重點看統一的規范
1.1.4 大一統的模塊化規范-ES6模塊化

image.png

1.2 Node.js中通過babel體驗ES6模塊化

node默認支持commonjs這種服務器端的模塊化

但是對于ES6模塊化支持的不是太好，所以需要使用第三方工具babel

babel是一個語法轉換工具，可以將高級的有兼容問題的代碼，轉換為低級的無兼容問題的代碼

node正好不兼容ES6模塊化的新語法，所以通過babel來進行轉換，做兼容處理
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

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

3 創建index.js文件

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

4 使用npx執行文件

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

# npm的m是Management，npx的x可以理解為eXecute。
# npx是npm的一個升級版
# npx 特點 （其實只需要記住一般安裝包，我們還是使用npm，然后執行babel-node命令時需要使用npx）
# 1、臨時安裝可執行依賴包，不用全局安裝，不用擔心長期的污染。

# 2、可以執行依賴包中的命令，安裝完成自動運行。

# 3、自動加載node_modules中依賴包，不用指定$PATH。

# 4、可以指定node版本、命令的版本，解決了不同項目使用不同版本的命令的問題。

5 效果：

image.png

2.ES6模塊化語法

2.1 默認導出與默認導入

模塊化中有很多數據是需要導入或導出的，我們來看一下如何導入導出

語法：

image.png

a和c暴露出去，d沒有暴露

所以在另一個文件中，導入m1之后，只能使用a和c

export：導出

import：導入
代碼：

//m1.js
let a = 10
let c = 20
let d = 30

function show() {
  console.log('1111111111111')
}

export default {
  a,
  c,
  show
}
//index.js
import m1  from './m1.js'

console.log(m1)

效果：看不到d，因為我們并沒有導出d（暴露d）

image.png

注意：
每個模塊中，只允許使用唯一的一次 export default，否則會報錯

例如：

//m1中增加如下代碼：
export default {
  d
}

運行：

image.png

注意：如果m1中沒有導出，index.js還是導入并且打印m1，是不會報錯的，會輸出一個空對象：{}

2.2 按需導出與按需導入

image.png

as 是起別名，起過別名，在使用的時候就只能使用別名

按需導入，需要添加{}
代碼：

//m1
let a = 10
let c = 20
let d = 30

function show() {
  console.log('1111111111111')
}

export default {
  a,
  c,
  show
}
export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {
  console.log('ooooooooo')
}
//index
import m1, { s1, s2 as ss2, say } from './m1.js'

console.log(m1)
console.log(s1)
console.log(ss2)
console.log(say)

注意：

import m1，只會導入export default，也就是默認導入的數據

按需導出的，只能通過按需導入來使用

效果：

image.png

2.3 直接導入并執行模塊代碼

介紹：

image.png

m2并沒有導出任何內容，只是定義了一段代碼

index直接導入了m2整個文件，并沒有導入某個，某些數據
代碼：

//m2
for (let i = 0; i < 3; i++) {
  console.log(i)
}

//index
import './m2.js'

效果：

image.png

3. webpack

3.1 介紹webpack的作用

當前web開發面臨的困境

image.png

webpack介紹：

webpack是一個流行的前端項目構建工具（打包工具），可以解決目前web開發的困境。

webpack提供了友好的模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優化等特性，提高了開發效率和項目的可維護性

webpack，pack：包裹，包裝。理解為web打包工具

image.png

3.2 創建列表隔行變色項目

步驟：

image.png

第一步項目名稱：webpack_study
-y 的含義：yes的意思，在init的時候省去了敲回車的步驟，生成的默認的package.json

第四步：頁面基本結構：index.html代碼

<body> 
    <ul>
      <li>這是第1個li</li>
      <li>這是第2個li</li>
      <li>這是第3個li</li>
      <li>這是第4個li</li>
      <li>這是第5個li</li>
      <li>這是第6個li</li>
      <li>這是第7個li</li>
      <li>這是第8個li</li>
      <li>這是第9個li</li>
    </ul> 
  </body>

第五步：

-S：--save，縮寫為-S，表示安裝的包將寫入package.json里面的dependencies 屬于生產模式

-D：--save-dev，縮寫為-D，表示將安裝的包將寫入packege.json里面的devDependencies 屬于開發模式

-g ：--global，縮寫為-g，表示安裝包時，視作全局的包。安裝之后的包將位于系統預設的目錄之下，一般來說

第六步：模塊化

//新建index.js
//index.html導入index.js
<script src="./index.js"></script>
//index.js代碼
import $ from 'jquery'
$(function() {
  $('li:odd').css('backgroundColor', 'blue')
  $('li:even').css('backgroundColor', 'lightblue')
})

最后直接打開index.html，發現index.js第一行代碼報錯了

import是ES6新語法，瀏覽器不兼容，所以報錯，

那怎么辦呢？需要借助webpack

接下來，我們就是來學習webpack

3.3 在項目中安裝和配置webpack

webpack可以支持部分的ES6新語法的轉換，如果想支持所有的還需要babel的支持

這里的部分，包含import語法

babel會處理webpack處理不了的新語法
步驟：

#注意： 需要安裝以下版本，新版本可能會有問題
npm install webpack@4.29.0 webpack-cli@3.2.1 -D

image.png

第三步：mode有兩種：

development：開發模式，打包的代碼不會壓縮和混淆

production：生產模式（正式上線模式），打包的代碼會壓縮和混淆

第五步：打包結果：

image.png

修改導入的js文件：修改為打包過的js，即可使用。（打包的時候webpack會將js中的新語法進行兼容處理）

//index.html中導入main.js
<!-- <script src="./index.js"></script> -->  //屏蔽index.js
 <script src="../dist/main.js"></script>

3.4 配置

3.4.1 配置打包的入口與出口

默認的打包入口和出口

image.png

修改默認：

如果不想使用默認的入口/出口js文件，我們可以通過改變 webpack.config.js 來設置入口/出口的js文件，如下：

const path = require("path");
module.exports = {
    mode:"development",
    //設置入口文件路徑
    entry: path.join(__dirname,"./src/xx.js"),
    //設置出口文件
    output:{
        //設置路徑
        path:path.join(__dirname,"./dist"),
        //設置文件名
        filename:"res.js"
    }
}

__dirname為項目根路徑

output的filename：老師改為了bundle.js

3.4.2 配置webpack的自動打包功能

為啥需要自動打包

因為修改代碼之后，需要重新打包才能看到效果

但是如果每次修改代碼，都手動執行：npm run dev，太麻煩了
自動打包步驟:

# 注意安裝以下版本
npm install webpack-dev-server@3.1.14 -D

image.png

第三步：buldle.js是視頻老師配置的打包出口文件

根據自己的情況處理，自己配置的output的filename如果是res.js那么這里就修改為/res.js

并且注意是根路徑

第四步：打包效果

image.png

而bundle.js這個文件，只能通過上述url看到，實際的項目根路徑是看不到的，他并沒有放到實際的硬盤上

bundle：捆，收集

注意，使用了webpack-dev-server命令打包之后，只能通過localhost:8080這樣的地址訪問，直接訪問index.html是不行的

訪問如下：訪問src，自動顯示index.html （當通過瀏覽器訪問一個文件夾時/目錄，默認會訪問當前目錄下的index.html/index.htm）

3.4.3 配置html-webpack-plugin生成預覽頁面

訪問IP地址：看到的是項目中根路徑下的所有內容
我們需要點擊src才能看到index.html（訪問src，默認訪問到index.html）

預覽界面設置：html-webpack-plugin就是生成預覽界面的插件

image.png

具體配置代碼:

A.安裝默認預覽功能的包:html-webpack-plugin
    npm install html-webpack-plugin -D
B.修改webpack.config.js文件，如下：
    //導入包
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    //創建對象
    const htmlPlugin = new HtmlWebpackPlugin({
        //設置生成預覽頁面的模板文件
        template:"./src/index.html",
        //設置生成的預覽頁面名稱
        filename:"index.html"
    })
C.繼續修改webpack.config.js文件，添加plugins信息：
    module.exports = {
        ......
        plugins:[ htmlPlugin ]
    }

訪問網址：localhost:8080，訪問的就是生成的存在于內存的index.html

注意：其實這里的index.html會自動引入內存中根目錄的bundle.js，所以可以給index.html的引入bundle.js屏蔽了

如果不屏蔽會出現問題，在3.5.7中可以看到問題

內存中的根目錄的bundle.js是在webpack自動打包時生成的

3.4.4 配置自動打包相關的參數

問題：當我們執行完打包命令，需要手動訪問localhost:8080才能看到首頁，太麻煩

配置參數：以下配置為自動打開瀏覽器訪問首頁

image.png

ip一般是127.0.0.1，localhost

port默認是8080，可以修改為8888

3.5 加載器

3.5.1 介紹加載器以及加載器的調用過程

通過loader打包非js文件

image.png

loader調用過程

image.png

3.5.2 打包處理css文件

我們會依次介紹如何打包常見文件，常見文件如下：

image.png

演示：

image.png

css中：去掉li的小圓點：list-style:none

index.js為啥要引入1.css？因為默認打包的是index.js，所以需要把1.css加入進去

為啥會報錯，因為webpack默認只能打包js文件，要想打包其他文件，需要loader

如何打包css？

image.png

rules：存放所有的loader規則

test接收一個正則表達式//，這個正則表達式只需要匹配文件的后綴即可

.代表點，css$表示以css結尾，其實就是以.css結尾

use接收一個數組，打包css文件，需要style-loader，和css-loader

配置之后，重新打包，最后訪問：

3.5.3 打包處理less文件

image.png

less文件打包除了需要less-loader，也需要依賴style-loader,css-loader
代碼：

//新建css/1.less
body {
  margin: 0;
  padding: 0;
  ul {
    padding: 0;
    margin: 0;
  }
}
//index.js
import './css/1.less'

3.5.4 打包處理scss文件

image.png

代碼：

//新建css/1.scss
ul {
  font-size: 12px;
  li {
    line-height: 30px;
  }
}
//index.js引入
import './css/1.scss'

.5.5 配置postCSS

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

image.png

代碼：

<!--index.htmlbody第一行添加-->
<input type="text" placeholder="ceshi" />
<!--1.css中添加樣式-->
::placeholder {
  color: red;
}

效果：在谷歌和ie上都可以讓 ceshi 文字變紅

按理說，我們需要自己添加瀏覽器前綴，但是配置過postCSS之后，他會幫助我們添加瀏覽器前綴

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

先來看一個問題：

代碼中添加一張圖片

#index.html
<div id="box"></div>
#1.css
#box {
  width: 580px;
  height: 340px;
  background-color: pink;
  background: url('../images/1.jpg');
}
#增加圖片：src/images/1.jpg

訪問頁面，之前的樣式全部丟失，說明打包失敗

image.png

打包圖片

image.png

use：可以接收loader數組，也可以接收一個loader名稱（字符串）

圖片大小，可以看一下1.jpg的屬性（圖片大小為：16940）

如果設置的limit大小與圖片大小一樣：圖片路徑就不會base64編碼（limit大于等于圖片大小不會編碼）

image.png

如果設置為16941：圖片url就會base64編碼（limit小于圖片大小會編碼）

image.png

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

webpack只支持一部分的ES6新語法，他需要配合babel才可以完全支持ES6新語法

先來看問題：
代碼:

#index.js
class Person {
  static info = 'aaa'
}

console.log(Person.info)

打包高級js語法

image.png

node_modules是第三方提供的js代碼，這些代碼不需要webpack打包

webpack只打包程序員自己的代碼

4. 單文件組件

4.1 單文件組件的組成結構

傳統組件問題和解決方案

image.png

單文件組件的用法

image.png

export default暴露對象數據

scoped：防止組件樣式之間的沖突問題

scope：區域，局部的意思

style添加scoped就是私有樣式，局部樣式

代碼：src/components/App.vue

<template>
  <div>
    <h1>這是 App 根組件</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

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

vue文件的代碼提示，可以在vscode中安裝Vetur

image.png

4.2 配置.vue文件的loader加載器

配置vue組件的加載器

image.png

安裝之后，代碼就不會報錯，但是也沒有任何效果，因為我們還沒有正式使用vue代碼

4.3 在webpack項目中使用vue

步驟

image.png

render: h => h(App)

image.png

代碼：

#index.js最后添加如下代碼
// -----------------------------------------------
import Vue from 'vue'
// 導入單文件組件
import App from './components/App.vue'

const vm = new Vue({
  el: '#app',
  render: h => h(App)
})
#index.html最后添加如下代碼
<hr />
<!-- 將來要被 vue 控制的區域 -->
<div id="app"></div>

4.4 webpack打包發布

配置：

image.png

-p：打包參數，package：打包

刪除dist目錄(打包發布之后，會生成dist目錄)

執行命令：npm run build

執行build命令，會執行webpack -p進行打包，而打包會參照webpack.config.js配置文件，查看入口和出口文件等等配置項

打包成功之后，會生成dist目錄，bundle.js與index.html文件

5. vue腳手架

5.1 介紹并安裝3.x版本的vue腳手架

腳手架基本用法介紹

Vue腳手架： 用于快速生成 Vue 項目基礎架構
理解：Vue腳手架，就是用于快速創建Vue項目的工具
官網：https://cli.vuejs.org/zh/guide/

安裝

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

npm install -g @vue/cli@3.10.0
如果安裝的時候沒有指定版本，那就卸載再安裝
先查詢版本：vue -V，如果查看后發現版本為4.x.x
npm uninstall -g @vue/cli@4.x.x
npm uninstall -g @vue/cli

檢驗安裝成功

vue -V
#如果能提示腳手架的版本，則說明安裝成功，例如版本為 3.3.0

5.2 基于交互式命令行創建新版vue項目

腳手架創建vue項目方式

image.png

重點掌握前兩種，第三種是基于2.x創建舊版vue項目（圖形化界面方式用的更多）

my-project為項目名稱，項目名稱不能出現中文

創建項目步驟:

1 創建項目

1.打開cmd
2.執行：vue create vue-proj_01

2 選擇創建項目方式

image.png

這個界面是vue手腳架提供的項目初始化配置的界面（也就是交互式命令行界面）

上下鍵選擇，回車確定

3 選擇安裝的功能

image.png

4傳智路由模式

image.png

5 選擇linter模式

image.png

6 校驗lint語法方式

image.png

7 選擇配置文件

image.png

8 是否保存模板

image.png

9 創建項目

image.png

啟動成功

image.png

main.js中的代碼（通過腳手架創建項目之后默認生成的代碼）

Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

productionTip說明

image.png

$mount('#app')

這個其實相當于el:'#app'

mount掛載，將vue掛載到id為app的標簽上

5.3 基于圖形化界面創建新版vue項目

基于圖形化界面創建項目步驟

執行命令：

#進入cmd
執行：vue ui

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue-day-06（前端工程化，ES6模塊化語法，webpack，vue腳手架）

Vue-day-06（前端工程化，ES6模塊化語法，webpack，vue腳手架）

1.1 模塊化的相關規范

1.1.2 瀏覽器模塊化規范

1.1.3 服務器端模塊化規范

1.2 Node.js中通過babel體驗ES6模塊化

2.ES6模塊化語法

2.1 默認導出與默認導入

2.2 按需導出與按需導入

2.3 直接導入并執行模塊代碼

3. webpack

3.1 介紹webpack的作用

3.2 創建列表隔行變色項目

3.3 在項目中安裝和配置webpack

3.4 配置

3.4.1 配置打包的入口與出口

3.4.2 配置webpack的自動打包功能

3.4.3 配置html-webpack-plugin生成預覽頁面

3.4.4 配置自動打包相關的參數

3.5 加載器

3.5.1 介紹加載器以及加載器的調用過程

3.5.2 打包處理css文件

3.5.3 打包處理less文件

3.5.4 打包處理scss文件

.5.5 配置postCSS

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

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

4. 單文件組件

4.1 單文件組件的組成結構

4.2 配置.vue文件的loader加載器

4.3 在webpack項目中使用vue

4.4 webpack打包發布

5. vue腳手架

5.1 介紹并安裝3.x版本的vue腳手架

5.2 基于交互式命令行創建新版vue項目

5.3 基于圖形化界面創建新版vue項目

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Vue-day-06（前端工程化，ES6模塊化語法，webpack，vue腳手架）

1.1 模塊化的相關規范

1.1.2 瀏覽器模塊化規范

1.1.3 服務器端模塊化規范

1.2 Node.js中通過babel體驗ES6模塊化

2.ES6模塊化語法

2.1 默認導出與默認導入

2.2 按需導出與按需導入

2.3 直接導入并執行模塊代碼

3. webpack

3.1 介紹webpack的作用

3.2 創建列表隔行變色項目

3.3 在項目中安裝和配置webpack

3.4 配置

3.4.1 配置打包的入口與出口

3.4.2 配置webpack的自動打包功能

3.4.3 配置html-webpack-plugin生成預覽頁面

3.4.4 配置自動打包相關的參數

3.5 加載器

3.5.1 介紹加載器以及加載器的調用過程

3.5.2 打包處理css文件

3.5.3 打包處理less文件

3.5.4 打包處理scss文件

.5.5 配置postCSS

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

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

4. 單文件組件

4.1 單文件組件的組成結構

4.2 配置.vue文件的loader加載器

4.3 在webpack項目中使用vue

4.4 webpack打包發布

5. vue腳手架

5.1 介紹并安裝3.x版本的vue腳手架

5.2 基于交互式命令行創建新版vue項目

5.3 基于圖形化界面創建新版vue項目

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue-day-06（前端工程化，ES6模塊化語法，webpack，vue腳手架）