Vue基礎--前端工程化(一)

時間  2021-04-24
標籤 css html 前端 vue node jquery webpack 程序員 web chrome 欄目 CSS 简体版
原文   原文鏈接

1. 模塊化相關規範

1.1 模塊化概述

傳統開發模式的主要問題css

  • 命名衝突
  • 文件依賴

經過模塊化解決上述問題html

  • 模塊化就是把單獨的一個功能封裝到一個模塊（文件）中，模塊之間相互隔離，可是能夠經過特定的接口公開內部成員，也能夠依賴別的模塊
  • 模塊化開發的好處：方便代碼的重用，從而提高開發效率，而且方便後期的維護

1.2 瀏覽器端模塊化規範

AMD(Asynchronous Module Definition,異步模塊定義)
​ 表明產品爲：Require.js
​CMD(Common Module Definition,通用模塊定義)
​ 表明產品爲：Sea.js前端

1.3 服務器端模塊化規範

CommonJSvue

模塊分爲 單文件模塊 與 包
模塊成員導出：module.exports 和 exports
模塊成員導入：require('模塊標識符')node

1.4 大一統的模塊化規範 – ES6模塊化

在 ES6 模塊化規範誕生以前，Javascript 社區已經嘗試並提出了 AMD、CMD、CommonJS 等模塊化規範。jquery

可是，這些社區提出的模塊化標準，仍是存在必定的差別性與侷限性、並非瀏覽器與服務器通用的模塊化標準，例如：webpack

AMD 和 CMD 適用於瀏覽器端的 Javascript 模塊化
CommonJS 適用於服務器端的 Javascript 模塊化程序員

所以，ES6 語法規範中，在語言層面上定義了 ES6 模塊化規範，是瀏覽器端與服務器端通用的模塊化開發規範。web

ES6模塊化規範中定義：
每一個 js 文件都是一個獨立的模塊
導入模塊成員使用 import 關鍵字
暴露模塊成員使用 export 關鍵字chrome

1.Node.js 中經過 babel 體驗 ES6 模塊化

① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
② npm install --save @babel/polyfill
③ 項目跟目錄建立文件 babel.config.js
④ 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 執行代碼

1.5 ES6 模塊化的基本語法

1. 默認導出 與 默認導入

默認導出語法 export default 默認導出的成員
默認導入語法 import 接收名稱 from '模塊標識符'

// 當前文件模塊爲 m1.js
// 定義私有成員 a 和 c
let a = 10
let c = 20
// 外界訪問不到變量 d ,由於它沒有被暴露出去
let d = 30
function show() {}
// 將本模塊中的私有成員暴露出去，供其它模塊使用
export default {
    a,
    c,
    show
}
// 導入模塊成員
 import m1 from './m1.js'
 console.log(m1)
 // 打印輸出的結果爲：
 // { a: 10, c: 20, show: [Function: show] }

注意：每一個模塊中，只容許使用惟一的一次 export default，不然會報錯！

2. 按需導出 與 按需導入

按需導出語法 export let s1 = 10
按需導入語法 import { s1 } from '模塊標識符'

// 當前文件模塊爲 m1.js
// 向外按需導出變量 s1
export let s1 = 'aaa' 
// 向外按需導出變量 s2
export let s2 = 'ccc'
// 向外按需導出方法 say
export function say = function() {}
// 導入模塊成員
//as 表示重命名
 import { s1, s2 as ss2, say } from './m1.js'
 console.log(s1) // 打印輸出 aaa
 console.log(ss2) // 打印輸出 ccc
 console.log(say) // 打印輸出 [Function: say]

注意：每一個模塊中，可使用屢次按需導出

3. 直接導入並執行模塊代碼

有時候，咱們只想單純執行某個模塊中的代碼，並不須要獲得模塊中向外暴露的成員，此時，能夠直接導入並執行模塊代碼。

// 當前文件模塊爲 m2.js
// 在當前模塊中執行一個 for 循環操做
for(let i = 0; i < 3; i++) {
 console.log(i)
}
// 直接導入並執行模塊代碼
 import './m2.js'

2. webpack

2.1 當前 Web 開發面臨的困境

  • 文件依賴關係錯綜複雜
  • 靜態資源請求效率低
  • 模塊化支持不友好
  • 瀏覽器對高級 Javascript 特性兼容程度較低
  • etc...

2.1 webpack 概述

webpack 是一個流行的前端項目構建工具（打包工具），能夠解決當前 web 開發中所面臨的困境。
webpack 提供了友好的模塊化支持，以及代碼壓縮混淆、處理 js 兼容問題、性能優化等強大的功能，從而讓程序員把
工做的重心放到具體的功能實現上，提升了開發效率和項目的可維護性。

目前絕大多數企業中的前端項目，都是基於 webpack 進行打包構建的。

image.png

2.2 webpack 的基本使用

1. 建立列表隔行變色項目

① 新建項目空白目錄，並運行 npm init –y 命令，初始化包管理配置文件 package.json
② 新建 src 源代碼目錄
③ 新建 src -> index.html 首頁,在項目目錄中建立js文件夾，並在文件夾中建立index.js文件
④ 初始化首頁基本的結構
⑤ 運行 npm install jquery –S 命令，安裝 jQuery
⑥ 經過模塊化的形式，實現列表隔行變色效果

打開index.js文件，編寫代碼導入jQuery並實現功能：

import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注意：此時項目運行會有錯誤，由於import $ from "jquery";這句代碼屬於ES6的新語法代碼，在瀏覽器中可能會存在兼容性問題
因此咱們須要webpack來幫助咱們解決這個問題。

2.在項目中安裝和配置 webpack

① 運行 npm install webpack webpack-cli –D 命令，安裝 webpack 相關的包
② 在項目根目錄中，建立名爲 webpack.config.js 的 webpack 配置文件
③ 在 webpack 的配置文件中，初始化以下基本配置：

module.exports = {
    mode: 'development' // mode 用來指定構建模式
}

④ 在 package.json 配置文件中的 scripts 節點下，新增 dev 腳本以下：

"scripts": {
"dev": "webpack" // script 節點下的腳本，能夠經過 npm run 執行
}

⑤ 在終端中運行 npm run dev 命令，啓動 webpack 進行項目打包。

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

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' // 輸出文件的名稱
    }
}
4. 配置 webpack 的自動打包功能

① 運行 npm install webpack-dev-server –D 命令，安裝支持項目自動打包的工具
② 修改 package.json -> scripts 中的 dev 命令以下：

"scripts": {
    "dev": "webpack-dev-server" // script 節點下的腳本，能夠經過 npm run 執行
}

③ 將 src -> index.html 中，script 腳本的引用路徑，修改成 "/buldle.js「
④ 運行 npm run dev 命令，從新進行打包
⑤ 在瀏覽器中訪問 http://localhost:8080 地址(它指定的地址)，查看自動打包效果

注意：
webpack-dev-server 會啓動一個實時打包的 http 服務器
webpack-dev-server 打包生成的輸出文件(buldle.js)，默認放到了項目根目錄中，並且是虛擬的、看不見的

此時在終端中運行 npm run dev 命令出現了錯誤
Error: Cannot find module 'webpack-cli/bin/config-yargs'

把webpack-cli版本下降後解決了問題
npm i webpack-cli@3.3.12 -D

//使用的配置
"devDependencies": {
"webpack": "^5.35.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
5. 配置 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 打包期間會用到的一些插件列表
}
6. 配置自動打包相關的參數
// package.json中的配置
 // --open 打包完成後自動打開瀏覽器頁面
 // --host 配置 IP 地址
 // --port 配置端口
 "scripts": {
 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8088"
 },

2.3 webpack 中的加載器

1. 經過 loader 打包非 js 模塊

在實際開發過程當中，webpack 默認只能打包處理以 .js 後綴名結尾的模塊，其餘非 .js 後綴名結尾的模塊，webpack 默認處理不了，須要調用 loader 加載器才能夠正常打包，不然會報錯！

loader 加載器能夠協助 webpack 打包處理特定的文件模塊，好比：

  • less-loader 能夠打包處理 .less 相關的文件
  • sass-loader 能夠打包處理 .scss 相關的文件
  • url-loader 能夠打包處理 css 中與 url 路徑相關的文件
2. loader 的調用過程

image.png

2.4 webpack 中加載器的基本使用
  • CSS
  • LESS
  • SCSS
  • PostCSS
  • JavaScript
  • Image/Font
  • Vue

1.打包處理 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 的調用順序是：從後往前調用

2.打包處理 less 文件

① 運行 npm i less-loader less -D 命令
② 在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則以下：

// 全部第三方文件模塊的匹配規則
 module: {
    rules: [
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
}

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

4.配置 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'] }
    ]
}

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

① 運行 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 圖片

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

① 安裝babel轉換器相關的包：npm i babel-loader @babel/core @babel/runtime -D
② 安裝babel語法插件相關的包：npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D
③ 在項目根目錄中，建立 babel 配置文件 babel.config.js 並初始化基本配置以下：

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

④ 在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則以下：

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

3. Vue 單文件組件

3.1 傳統組件的問題和解決方案

1.問題

  • 全局定義的組件必須保證組件的名稱不重複
  • 字符串模板缺少語法高亮，在 HTML 有多行的時候，須要用到醜陋的 \
  • 不支持 CSS 意味着當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
  • 沒有構建步驟限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器（如：Babel）

2.解決方案
針對傳統組件的問題，Vue 提供了一個解決方案 —— 使用 Vue 單文件組件。

3.2 Vue 單文件組件的基本用法

單文件組件的組成結構

  • template 組件的模板區域
  • script 業務邏輯區域
  • style 樣式區域
<template>
 <!-- 這裏用於定義Vue組件的模板內容 -->
 </template>
 <script>
 // 這裏用於定義Vue組件的業務邏輯
 export default {
 data: () { return {} }, // 私有數據
 methods: {} // 處理函數
 // ... 其它業務邏輯
 }
 </script>
 <style scoped>
 /* 這裏用於定義組件的樣式 */
 </style>

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

3.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() // 請確保引入這個插件！
    ]
}
3.4 在 webpack 項目中使用 vue

① 運行 npm i vue –S 安裝 vue
② 在 src -> index.js 入口文件中，經過 import Vue from 'vue' 來導入 vue 構造函數
③ 建立 vue 的實例對象，並指定要控制的 el 區域
④ 經過 render 函數渲染 App 根組件

//App.vue
<template>
    <div>
        <h1>測試</h1>
    </div>
    
</template>

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

    },
}

</script>

<style scoped>
h1 {
    color:aquamarine;
}

</style>
//index.js
import Vue from 'vue';
//導入根組件
import App from './components/App.vue';

const vm = new Vue({
    el: '#app',
    render: h => h(App)

})
//index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <script src="/bundle.js"></script>
</head>

<body>
    <ul>
        <li>第1</li>
        <li>第2</li>
        <li>第3</li>
    </ul>

    <div id="box"></div>

    <!-- 將要要被 vue 控制的區域 -->
    <div id="app"></div>
</body>

</html>
3.5 webpack 打包發佈

上線以前須要經過webpack將應用進行總體打包，能夠經過 package.json 文件配置打包命令:

// 在package.json文件中配置 webpack 打包命令
// 該命令默認加載項目根目錄中的 webpack.config.js 配置文件
"scripts": {
    // 用於打包的命令
    "build": "webpack -p",
}

在項目打包以前，能夠將dist目錄刪除，生成全新的dist目錄

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程