vue-前端工程化

時間 2020-07-07

標籤 vue 前端工程简体版

原文原文鏈接

模塊化相關規範
webpack
Vue 單文件組件
Vue 腳手架
Element-UI 的基本使用

1. 模塊化相關規範css

① 模塊化概述
html

傳統開發模式的主要問題：
前端

命名衝突
文件依賴

經過模塊化解決上述問題：
vue

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

② 瀏覽器端模塊化規範
node

AMD：Require.js (http://www.requirejs.cn/)

CMD：Sea.js (https://seajs.github.io/seajs/docs/)

③ 服務器端模塊化規範
jquery

CommonJS：webpack

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

④ 大一統的模塊化規範 – ES6模塊化
git

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

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

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

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

ES6模塊化規範中定義：

每一個 js 文件都是一個獨立的模塊
導入模塊成員使用 import 關鍵字
暴露模塊成員使用 export 關鍵字

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

Node.js默認支持CommonJS中的模塊化規範，可是對ES6中的模塊化支持的並非很好，須要結合Babel這個第三方插件來體驗高級的ES6特性。

Babel是一個語法轉換工具，能夠把高級的有兼容性的JavaScript代碼轉換爲低級的沒有兼容性的JavaScript代碼。

如何在項目中配置Babel呢？

1）npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2）npm install --save @babel/polyfill

3）項目跟目錄建立文件 babel.config.js

4）babel.config.js 文件內容如右側代碼

5）經過 npx babel-node index.js 執行代碼

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

⑤ 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() {}

// 導入模塊成員
import { s1, s2 as ss2, say } from './m1.js'
console.log(s1) // 打印輸出 aaa
console.log(ss2) // 打印輸出 ccc
console.log(say) // 打印輸出 [Function: say]

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

注意：

import m1 from './m1.js'的m1指向的是默認導出的成員，m1中是不會包含按需導出的成員的（s一、s二、say）
按需導出的成員必須單獨導入，名稱必須與導出的名稱一致
可使用as來取個別名

import m1, { s1, s2 as ss2, say } from './m1.js'

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

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

// 當前文件模塊爲 m2.js

// 在當前模塊中執行一個 for 循環操做
for(let i = 0; i < 3; i++) {
    console.log(i)
}

// 直接導入並執行模塊代碼
import './m2.js'

2. webpack

① 當前 Web 開發面臨的困境

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

② webpack 概述

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

③ webpack 的基本使用

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

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

// index.js文件
import $ from 'jquery';

$(function() {
  $('li:odd').css('backgroundColor', 'blue')
  $('li:even').css('backgroundColor', 'lightblue')
})

<!-- index.html頁面 -->
<script src="./index.js"></script>

<!-- ul>li{這是第$個li}*9 -->
<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>

可是上面的代碼並不能實現隔行變色的效果，這是由於import $ from 'jquery'是ES6模塊化語法，瀏覽器中對這種語法支持的不是很好，因此瀏覽器不識別就報錯了。

如何解決呢？能夠基於webpack將這種兼容性的代碼轉換爲沒有兼容性的代碼。而且在html頁面中導入轉換以後的js文件

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 進行項目打包。

main.js是使用webpack打包後生成的文件，不存在兼容性問題，所以須要引入的是打包好後的main.js文件，而不是原來的index.js文件

<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>

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「。即將dist目錄下改成根目錄下

<!-- <script src="../dist/main.js"></script> -->
<!-- <script src="../dist/bundle.js"></script> -->
<script src="/bundle.js"></script>

運行 npm run dev 命令，從新進行打包
在瀏覽器中訪問 http://localhost:8080 地址，查看自動打包效果。http://localhost:8080就是項目的根目錄：

注意：

webpack-dev-server 會啓動一個實時打包的 http 服務器
webpack-dev-server 打包生成的輸出文件，默認放到了項目根目錄中，並且是虛擬的、看不見的。即bundle.js在項目的根目錄下，可是並無放在實際的物理磁盤上，而是放在了內存中，是一個看不見的文件。輸入 http://localhost:8080/bundle.js就能夠查看到該文件的代碼

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

項目跑起來以後，訪問網址後並無看到咱們但願的首頁，而是如上圖中的一層路徑，須要進入到src路徑下才能訪問。而咱們的需求是，只要訪問網站的根路徑，就能夠當即看到首頁，不須要人爲的點一下。

如何解決呢？只須要將src路徑下的首頁複製一份放到網站的根目錄下便可。由於咱們都知道，若是在瀏覽器中訪問一層路徑的話，這個路徑中若是包含一個index.html，則默認會打開這個頁面展現給用戶。

那如何將src裏面的index.html複製到網站根目錄下呢？須要使用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）配置自動打包相關的參數

當咱們啓動項目後，須要本身手動複製默認的網址localhost:8080，而後粘貼到瀏覽器中才能訪問頁面。如何在打包完成的一瞬間，自動彈開瀏覽器並去訪問該網址呢？

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

④ webpack 中的加載器

1）經過 loader 打包非 js 模塊

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

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

less-loader 能夠打包處理 .less 相關的文件
sass-loader 能夠打包處理 .scss 相關的文件
url-loader 能夠打包處理 css 中與 url 路徑相關的文件

2）loader 的調用過程

⑤ 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 命令。注意，file-loader是url-loader的內置項，咱們只須要安裝，而不須要顯示的去配置
在 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 圖片。圖片被轉成base64格式會在加載的時候更快一些。

而大於等於該limit大小的圖片，顯示的是真正的路徑：

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 單文件組件

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

問題：

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

解決方案：

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

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

單文件組件的組成結構：

template：組件的模板區域
script：業務邏輯區域
style：樣式區域。 style儘可能都加上scoped指令，這樣可以防止樣式之間的衝突。

<template>
    <!-- 這裏用於定義Vue組件的模板內容 -->
    <div>
        <h1>這是 App 根組件</h1>
    </div>
</template>

<script>
    // 這裏用於定義Vue組件的業務邏輯
    export default {
        data: () { return {} }, // 私有數據
        methods: {} // 處理函數
        // ... 其它業務邏輯
}
</script>

<style scoped>
    /* 這裏用於定義組件的樣式 */
    h1 {
      color: red;
    }
</style>

③ 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() // 請確保引入這個插件！
    ]
}

④ 在 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 './components/App.vue'

const vm = new Vue({
    // 3. 指定 vm 實例要控制的頁面區域
    el: '#app',
    // 4. 經過 render 函數，把指定的組件渲染到 el 區域中
    render: h => h(App)
})

注意，在webpack中使用Vue並非最全版本的，在該版本中的vue只支持使用render函數來渲染組件，不支持component屬性，也不支持template屬性。

⑤ 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",
},

dist文件夾裏面的內容就是上線打包好的項目。

4. Vue 腳手架

① Vue 腳手架的基本用法

Vue 腳手架用於快速生成 Vue 項目基礎架構，其官網地址爲：https://cli.vuejs.org/zh/

使用步驟：

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

npm install -g @vue/cli

基於3.x版本的腳手架建立vue項目：

// 1. 基於 交互式命令行 的方式，建立 新版 vue 項目
vue create my-project  // 項目名稱必須是英文的，不能包含中文或者其餘的特殊字符 // 2. 基於 圖形化界面 的方式，建立 新版 vue 項目
vue ui

// 3. 基於 2.x 的舊模板，建立 舊版 vue 項目
npm install -g @vue/cli-init
vue init webpack my-project

1）交互式命令行方式

使用vue create命令建立項目以後，會進入一個交互式的問答面板。

能夠經過上下箭頭來選擇。

默認方式建立項目仍是手動選擇某些功能而後再建立項目？

使用手動選擇以後會進入一個新面板。

若是要選擇router，則選中router對象，而後單擊一下空格就能夠打印出一個*，*表明要安裝這一項，若是是空的，則表示不安裝。

點擊回車進入到下一個面板。

是否安裝歷史模式的router？咱們推薦使用hash模式的路由，因此輸入n。

讓咱們選擇ESLint的語法類型，通常選擇standard config。

進入下一個面板，選擇何時進行ESLint語法規則校驗？默認選擇第一項。

這些Babel，PostCSS，ESLint等等一些工具的配置文件怎麼去進行建立？推薦選擇單獨配置文件

建立單獨的配置文件仍是把這些工具的配置文件都放到package.json文件中？

是否把當前咱們作過的一些選擇保存爲一個模板，供咱們後續再建立項目的時候直接選擇這個模板就好了，而不須要每次都本身選了

建立項目的過程當中：

項目建立完成以後，能夠進入該目錄中，而後運行npm run serve命令來運行該項目。

進入localhost:8080網址，就能夠看到建立好的vue項目

2）圖形化界面的方式

輸入vue ui命令後，會自動彈出一個圖形化界面

項目建立完成以後，會顯示一個項目儀表盤

啓動項目：

3）2.x的舊模板建立方式

輸入命令以後也會進入一個交互式界面。

依次按要求輸入：

項目名稱
項目描述
做者
安裝什麼版本的vue：第一個選項是最全版本的vue，體積比較大，不推薦。第二個選項是不全的，體積較小。
是否安裝路由
是否安裝ESLint
是否安裝單元測試
是否安裝e2e測試
使用哪一種方式安裝項目依賴包

正在建立項目基本結構：

啓動項目：

② Vue 腳手架生成的項目結構分析

③ Vue 腳手架的自定義配置

1）經過 package.json 配置項目

// 必須是符合規範的json語法
"vue": {
    "devServer": {
        "port": "8888",
        "open" : true  // 自動彈出瀏覽器
    }
},

注意：不推薦使用這種配置方式。由於 package.json 主要用來管理包的配置信息；爲了方便維護，推薦將 vue 腳手架相關的配置，單獨定義到 vue.config.js 配置文件中。

2）經過單獨的配置文件配置項目

在項目的跟目錄建立文件 vue.config.js
在該文件中進行相關配置，從而覆蓋默認配置

// vue.config.js
module.exports = {
    devServer: {
        port: 8888
    }
}

5. Element-UI 的基本使用

Element-UI：一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。

官網地址爲：http://element-cn.eleme.io/#/zh-CN

① 基於命令行方式手動安裝

安裝依賴包 npm i element-ui –S
導入 Element-UI 相關資源

// 導入組件庫
import ElementUI from 'element-ui';
// 導入組件相關樣式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);

② 基於圖形化界面自動安裝

運行 vue ui 命令，打開圖形化界面
經過 Vue 項目管理器，進入具體的項目配置面板
點擊插件 -> 添加插件，進入插件查詢面板
搜索 vue-cli-plugin-element 並安裝
配置插件，實現按需導入，從而減小打包後項目的體積

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。