vue 全家桶 - 前端工程化
目錄
- 主要內容
- 1. 模塊化相關規范
- 1.1 模塊化概述
- 1.2 模塊化規范
- A. 瀏覽器端的模塊化
- B. 服務器端的模塊化
- C. 大一統的模塊化規范 – ES6模塊化
- 1.3 體驗ES6模塊化 - 在 NodeJS 中安裝 babel
- 1.3.1 安裝 babel
- A. 安裝 babel
- B. 創建 babel.config.js
- C. 創建 index.js 文件
- D. 使用 npx 執行文件
- 1.4 ES6 模塊化的基本語法
- 1.4.1 默認導出與導入
- A. 默認導出
- B. 默認導入
- 1.4.2 按需導入 與 按需導出
- A. 按需導出
- B. 按需導入
- 1.4.5 直接導入并執行模塊代碼
- 2. webpack
- 2.1 webpack概述
- 2.2 webpack 的基本使用
- 2.3 webpack 中的加載器
- 2.3.1 通過 **loader** 打包非 js 模塊
- 2.3.2 loader 的調用過程
- 2.4 加載器的基本使用
- 2.4.1 打包處理 CSS 文件
- 2.4.2 打包處理 less 文件
- 2.4.3 打包處理 scss 文件
- 2.4.4 配置 post-css 自動添加 css 的兼容性前綴（-ie-,-webkit-）
- 2.4.5 打包樣式表中的圖片和字體文件
- 2.4.6 打包 js 文件中的高級語法
- 3. Vue單文件組件
- 3.1 傳統 Vue 組件的缺陷
- 3.2 解決方案
- 3.3 webpack 中配置 vue 組件的加載器
- 3.4 在 webpack項目中使用 vue
- 3.5 使用 webpack 打包發布項目
- 4. Vue 腳手架
- 4.1 Vue 腳手架的基本用法
- 4.2 **分析Vue腳手架生成的項目結構**
- 4.3 Vue 腳手架的自定義配置
- 5. Element-UI 的基本使用
- 5.1 基于命令行方式手動安裝
- 5.2 基于圖形化界面自動安裝
主要內容
- 模塊化的相關規范；
- webpack；
- 使用Vue單文件組件；
- 搭建Vue腳手架；
- Element-UI 的使用
1. 模塊化相關規范
1.1 模塊化概述
模塊化，就是把單獨的一個功能封裝到一個模塊（文件）中，模塊之間相互隔離，但是可以通過特定的接口公開內部成員，也可以依賴別的模塊。
模塊化開發的 好處：方便代碼的重用，從而提升開發效率，并且方便后期的維護
1.2 模塊化規范
A. 瀏覽器端的模塊化
1). AMD（Asynchronous Module Definition，異步模塊定義），代表產品為：Require.js(https://requirejs.org)。
2). CMD（Common Module Definition，通用模塊定義），代表產品為：Sea.js(https://seajs.github.io/seajs/docs)
B. 服務器端的模塊化
服務器端 的模塊化規范是使用 CommonJS 規范：
1). 模塊成員導出：exports 或者 module.exports ；
2). 模塊成員導入：require(“模塊標識符”) ；
3). 模塊分為：單文件模塊 與 包（一個文件 就是一個模塊，都擁有 獨立的作用域）。
C. 大一統的模塊化規范 – ES6模塊化
ES6模塊化規范中定義：
1). 每一個js文件都是獨立的模塊；
2). 導入模塊成員：使用import關鍵字；
3). 暴露模塊成員：使用export關鍵字。
【小結】：推薦 使用 ES6模塊化，因為 AMD，CMD 局限使用與瀏覽器端，而CommonJS 在服務器端使用。
ES6模塊化 是 瀏覽器端 和 服務器端 通用的規范 。
總結如下：
1.3 體驗ES6模塊化 - 在 NodeJS 中安裝 babel
在 Node 中，通過 babel 體驗 ES6 模塊化 。
1.3.1 安裝 babel
babel：一個語法轉換工具，可以把高級的 JavaScript 代碼，轉換為低級的、沒有兼容性問題的 JavaScript 代碼，
步驟如下：
項目根目錄下進行如下幾步：
A. 安裝 babel
打開終端，輸入命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node安裝過程如下所示：
安裝完畢之后，再次輸入命令安裝：
npm install --save @babel/polyfillB. 創建 babel.config.js
在項目目錄中創建babel.config.js文件。
編輯 JavaScrpt 文件中的代碼如下：
const presets = [ ["@babel/env",{targets:{edge:"17",firefox:"60",chrome:"67",safari:"11.1"}}] ] //暴露 module.exports = { presets }presets 是一個 語法轉換數組，里面提供了轉換期間可能要用到的一些語法轉換插件。
其中，@babel/env就是一個語法轉換插件（也就是preset-env），里面提供了targets節點，表示轉換完畢后的那些代碼，起碼要支持對象里所列出的 edge、firefox、chorme、safari 這些瀏覽器。
最后，把exports通過module.exports向外暴露出去，供 babel 使用。
運行 npx 命令（高版本的 npm 中，已默認提供，可直接通過 npx 來運行某些cli的命令），啟動 babel ：
npx bebel-node index.jsbabel 在運行之前，會先讀取 babel.config.js中的配置信息，然后根據指定的配置信息，來做相關的代碼轉換。
C. 創建 index.js 文件
在項目目錄中創建index.js文件作為入口文件
在index.js中輸入需要執行的 js 代碼，例如：
console.log("ok");D. 使用 npx 執行文件
打開終端，輸入命令：
npx babel-node ./index.js1.4 ES6 模塊化的基本語法
1.4.1 默認導出與導入
-
默認導出語法：export default 默認導出的成員
-
默認導入語法：import 接收名稱 from '模塊標識符'
注意：每個模塊中，只允許使用 唯一 的一次 export default，否則會報錯！
A. 默認導出
創建 m1.js 文件
let a = 10 let c = 20 let d = 30 function show() {console.log('默認導出'); }export default {a,c,show }創建 index.js 文件
import m1 from './模塊路徑'：這里的 m1 是接收名稱 ，可任意命名（只要合法）。
項目終端運行 npx 命令：
npx babel-node .\index.js如下圖所示：
可以看到，打印出的對象中，沒有包含d屬性，因為它 沒有在 m1 模塊中默認導出。
B. 默認導入
import 接收名稱 from “模塊標識符”，如下：
import test from "./test.js"注意： 在一個模塊中，只允許 使用export default 向外默認 暴露一次 成員，千萬不要寫多個export default。
如果在一個模塊中沒有向外暴露成員，其他模塊引入該模塊時將會得到一個空對象。
1.4.2 按需導入 與 按需導出
A. 按需導出
export let num = 998; export let myName = "jack"; export function fn = function(){ console.log("fn") }注： 每個模塊中，可以使用 多次 按需導出（ “默認導出” 只能一次）。
B. 按需導入
import { num,fn as printFn ,myName } from "./test.js" //同時導入默認導出的成員以及按需導入的成員 import test,{ num,fn as printFn ,myName } from "./test.js"注意： 一個模塊中既可以按需導入也可以默認導入，一個模塊中既可以按需導出也可以默認導出。每個模塊中，可以使用多次按需導出
1.4.5 直接導入并執行模塊代碼
如果只想單純執行某個模塊中的代碼，并不需要得到模塊中向外暴露的成員，此時，可以直接導入并執行模塊代碼。
// 當前文件模塊為 m2.js// 在當前模塊中執行一個 for 循環操作 for(let i = 0; i < 3; i++) {console.log(i)}直接導入：
import "./test2.js";2. webpack
2.1 webpack概述
webpack 是一個流行的前端項目構建工具，可以解決目前 web 開發的困境。
webpack 提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優化等特性，提高了開發效率和項目的可維護性。
目前絕大多數企業中的前端項目，都是基于 webpack 進行打包構建的。
2.2 webpack 的基本使用
創建項目目錄并初始化
創建項目，并打開項目所在目錄的終端，輸入命令
npm init -y創建首頁及 js 文件
在項目目錄中創建 index.html 頁面，并初始化頁面結構：在頁面中擺放一個 ul，ul 里面放置幾個 li，在項目目錄中創建 js 文件夾，并在文件夾中創建 index.js 文件。
安裝 jQuery
打開項目目錄終端，輸入命令:
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 來幫助我們解決這個問題。
安裝 webpack
打開項目目錄終端，輸入命令:
npm install webpack@4.43.0 webpack-cli@3.3.11 -D此處為安裝指定的版本4.43.0和3.3.11，不指定版本即默認安裝最新版本（如果運行示例可能會報錯）。
【關于參數 -S -D】：
1）-S 即--save（保存）：自動把包名、版本號等注冊到package.json的dependencies里，生產環境下該包的依賴依然存在；——生產階段要使用的組件
2）-D 即--dev（生產）：自動把包名、版本號等注冊到package.json的devDependencies里（如果是僅需在開發環境下存在的包，就用-D，如 babel，sass-loader等解析器）—— 僅開發階段使用的組件（不會進行最后的真正打包，只用來轉換）；
配置 webpack
在項目根目錄中，創建一個 webpack.config.js 的配置文件用來配置 webpack。如下：
module.exports = {//構建模式，可以設置為development(開發模式)，production(發布模式)mode:"development" }補充： mode 設置的是項目的編譯模式。
如果設置為development則表示項目處于開發階段，不會進行壓縮和混淆，打包速度會快一些；
如果設置為production則表示項目處于上線發布階段，會進行壓縮和混淆，打包速度會慢一些。
添加運行腳本dev
在項目中的 package.json 文件中，添加運行腳本dev，如下：
"scripts":{"dev":"webpack" }注： scripts 節點下的腳本，可以通過 npm run 在終端運行。
npm run dev將會啟動 webpack 進行項目打包。
項目打包
在項目目錄終端中輸入命令：
npm run dev回車后，開始運行dev命令進行項目打包。
頁面中引入項目打包生成的 js文件
等待 webpack 打包完畢之后，找到默認的dist路徑中生成的main.js文件，將其引入到 html 文件中。
設置 webpack 的打包 入口 / 出口
在 webpack 4.x 中，默認會將src/index.js 作為默認的打包入口 js 文件。
默認會將dist/main.js作為默認的打包輸出 js 文件，如果不想使用默認的 入口 / 出口 js 文件，我們可以通過改變 webpack.config.js 來設置入口/出口的 js 文件，如下：
設置 webpack 的自動打包
默認情況下，我們更改入口 js 文件的代碼，需要重新運行命令打包 webpack，才能生成出口的 js 文件，每次都要重新執行命令打包，這是一個非常繁瑣的事情，那么，自動打包 可以解決這樣繁瑣的操作。
---------------【實現自動打包功能的步驟】---------------
1） 安裝自動打包功能的包：webpack-dev-server
npm install webpack-dev-server -D2）修改package.json中的dev指令：
"scripts":{"dev":"webpack-dev-server" }3）將引入的 js 文件路徑更改為：
<script src="/bundle.js"></script>4）運行打包命令：
npm run dev5）打開網址查看效果，網址：
http://localhost:8080注： webpack-dev-server自動打包 的 輸出文件，默認放到了服務器的 根目錄 中。
【補充】：自動打包完畢之后，默認打開服務器網頁，實現方式就是打開package.json文件，修改dev命令：
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"配置 html-webpack-plugin，生成預覽頁面
使用 html-webpack-plugin 可以生成一個預覽頁面。
由于當我們訪問默認的 http://localhost:8080/的時候，看到的是一些文件和文件夾，想要查看頁面時還需要點擊文件夾 / 點擊文件才能查看，那么我們希望默認就能看到一個頁面，而不是看到文件夾或者目錄。
-------------【實現默認預覽頁面功能的步驟】--------------
1）安裝生成預覽頁面的插件：html-webpack-plugin
npm install html-webpack-plugin -D2）修改 webpack.config.js 文件頭部區域，添加如下配置信息：
// 導入生成預覽頁面的插件，得到一個 構造函數 const HtmlWebpackPlugin = require("html-webpack-plugin"); //創建插件的實例對象 const htmlPlugin = new HtmlWebpackPlugin({//指定生成預覽頁面的模板文件template:"./src/index.html",//設置生成的文件的名稱filename:"index.html" })注： 生成的文件名稱存在于內存中，在目錄中不顯示。
3）向外暴露配置對象
?????繼續修改 webpack.config.js 文件，添加 plugins 配置信息：
plugins 數組，是 webpack 打包期間會用到的一些插件的集合。
配置自動打包相關的參數
package.json中的配置參數說明
| --open | 打包完成后自動打開瀏覽器頁面 |
| --host | 配置 IP 地址 |
| --port | 配置端口 |
代碼示例：
"scripts": {"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" },2.3 webpack 中的加載器
2.3.1 通過 loader 打包非 js 模塊
實際開發中，webpack 默認只能打包 處理以.js后綴名結尾的模塊。其它 非 js 文件，需要調用 loader 加載器 才可以正常打包，否則會報錯。
loader 加載器可以協助 webpack 打包處理特定的文件模塊。包含：
- less-loader：可以打包處理.less相關的文件
- sass-loader：可以打包處理.scss相關的文件
- url-loader：打包處理css中與url路徑有關的文件
- babel-loader：處理高級js語法的加載器
- postcss-loader：自動添加 css 的兼容前綴
- css-loader,style-loader：打包處理.css相關的文件
注意：指定多個 loader 時的順序是 固定 的，而調用 loader 的順序是 從后向前 進行調用。
2.3.2 loader 的調用過程
2.4 加載器的基本使用
2.4.1 打包處理 CSS 文件
-
安裝包
安裝處理 css 文件的 loader：
npm install style-loader css-loader -D
-
配置規則
在webpack.config.js 的 module -> rules 數組中，添加 loader 規則 如下：
module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{//需要匹配的文件類型，支持正則test:/\.css$/,//use表示該文件類型需要調用的loaderuse:['style-loader','css-loader']}]} }其中，test 表示匹配的文件類型， use 表示對應要調用的 loader 。
注：
- use 數組中指定的 loader 順序是 固定 的；
- 多個 loader 的 調用順序：從后往前調用。
2.4.2 打包處理 less 文件
安裝 less，less-loader 處理 less 文件
安裝包
npm install less-loader less -D配置規則
在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則如下：
module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]}}2.4.3 打包處理 scss 文件
安裝 sass-loader，node-sass 處理 less 文件
安裝包
npm install sass-loader node-sass -D配置規則
在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則如下
module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]}}補充：安裝 sass-loader 失敗時，大部分情況是因為網絡原因，詳情參考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
2.4.4 配置 post-css 自動添加 css 的兼容性前綴（-ie-,-webkit-）
安裝包
npm install postcss-loader autoprefixer -D創建并配置文件
在項目根目錄中創建 postcss 的配置文件 postcss.config.js，并初始化如下配置：
// 導入自動添加前綴的插件 const autoprefixer = require("autoprefixer");module.exports = {plugins:[ autoprefixer ] // 掛載插件 }修改規則
在 webpack.config.js 的 module -> rules 數組中，修改 css 的 loader 規則如下：
module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{//test設置需要匹配的文件類型，支持正則test:/\.css$/,//use表示該文件類型需要調用的loaderuse:['style-loader','css-loader','postcss-loader']}]}}2.4.5 打包樣式表中的圖片和字體文件
在樣式表 css 中有時候會設置背景圖片和設置字體文件，一樣需要 loader 進行處理。
使用 url-loader 和 file-loader 來處理打包圖片文件以及字體文件：
安裝包
npm install url-loader file-loader -D配置規則
在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則如下：
module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,//limit用來設置字節數，只有小于limit值的圖片，才會轉換//為base64圖片use:"url-loader?limit=16940"}]}}其中 ? 之后是 loader 的參數項。 limit 用來指定圖片的大小（單位：字節byte)，只有小于limit大小的圖片，才會被轉為 base64 圖片。
2.4.6 打包 js 文件中的高級語法
在編寫 js 的時候，有時候我們會使用高版本的 js 語法。
有可能這些 高版本的語法 不被兼容，需要將之打包為 兼容性的 js 代碼 。
安裝babel 轉換器相關的包：
安裝 babel 語法相關的插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D創建 babel.config.js 文件并初始化配置
在項目根目錄中，創建 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 數組中，添加 loader 規則如下：
module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{test:/\.js$/,use:"babel-loader",//exclude為排除項，意思是不要處理node_modules中的js文件exclude:/node_modules/}]} }3. Vue單文件組件
3.1 傳統 Vue 組件的缺陷
- 全局定義的組件不能重名，字符串模板缺乏語法高亮，不支持 css (當 html 和 js 組件化時，css 沒有參與其中)
- 沒有構建步驟限制，只能使用 H5 和 ES5，不能使用預處理器（babel）
3.2 解決方案
-
使用 Vue 單文件組件（后綴名為.vue）；
-
Vue 單文件組件由 三部分組成：
- template 組件組成的 模板 區域 ；
- script 組成的 業務邏輯 區域；
- style 樣式 區域 。
代碼如下：
<template>組件代碼區域 </template><script>js代碼區域 </script><style scoped>樣式代碼區域 </style>scoped的作用：實現組件的 私有化，不對全局造成樣式污染。
即，當前style的屬性只屬于當前模塊。當<style>標簽具有該scoped屬性時，其 css 將僅應用于 當前組件的元素。
補充：安裝 Vetur 插件 可以使得.vue文件中的 代碼高亮。
3.3 webpack 中配置 vue 組件的加載器
配置規則
在 webpack.config.js 配置文件中，添加 vue-loader 的配置項如下：
const VueLoaderPlugin = require("vue-loader/lib/plugin"); const vuePlugin = new VueLoaderPlugin(); module.exports = {......plugins:[// ... 其它插件htmlPlugin,vuePlugin ],module : {rules:[...//其他規則{ test:/\.vue$/,loader:"vue-loader", }]} }3.4 在 webpack項目中使用 vue
想要讓 vue 單文件組件能夠使用，必須要 安裝 vue，并使用 vue 來引用 vue 單文件組件。
安裝 Vue
npm install vue -S在 index.js 中導入 Vue
在 src →\rightarrow→ index.js 入口文件中，導入 Vue 構造函數：
1）導入構造函數
import Vue from 'vue'2）導入根組件
import App from './components/App.vue'創建 Vue 實例對象并指定要控制的 el 區域，再使用 render 函數渲染 App 根組件。
const vm = new Vue({el:"#first",// 通過 render 函數，把指定的組件渲染到 el 區域render:h=>h(App) })3.5 使用 webpack 打包發布項目
項目上線之前，需要通過 webpack 將應用進行整體打包.
通過 package.json 配置打包命令
"scripts":{// 用于打包的命令"build": "webpack -p",// 用于開發調試的命令"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000" }該命令默認加載項目根目錄中的 webpack.config.js 配置文件。
在項目打包之前，可以將 dist 目錄刪除，生成全新的 dist 目錄。
4. Vue 腳手架
4.1 Vue 腳手架的基本用法
Vue腳手架 用于快速生成 Vue 項目基礎架構。其官網地址為：https://cli.vuejs.org/zh/
使用步驟：
安裝 3.x 版本的 Vue 腳手架
npm install -g @vue/cli注： 3.x 兼容 2.x，所以這里安裝高版本。
基于3.x 版本的腳手架 創建 Vue 項目：
-
使用命令創建新版 Vue 項目
vue create my-project選擇 Manually select features (選擇特性以創建項目)
（勾選特性，按下空格鍵即可進行勾選。）
是否選用歷史模式的路由：n
ESLint選擇：ESLint + Standard config
何時進行ESLint語法校驗：Lint on save（這個是默認的）
babel，postcss等配置文件如何放置：In dedicated config files(單獨使用文件進行配置)
是否保存為模板：n
使用哪個工具安裝包：npm
-
基于 ui 界面（圖形化）創建新版 Vue 項目
命令：vue ui
在自動打開的創建項目網頁中配置項目信息。
-
基于2.x 的舊模板，創建舊版 Vue 項目
npm install -g @vue/cli-init vue init webpack my-project
4.2 分析Vue腳手架生成的項目結構
Vue 腳手架生成的項目結構分析
- node_modules：依賴包目錄；
- public：靜態資源目錄；
- src：源碼目錄；
- src/assets：資源目錄；
- src/components：組件目錄；
- src/views：視圖組件目錄；
- src/App.vue：根組件；
- src/main.js：入口js；
- src/router.js：路由js；
- babel.config.js：babel 配置文件；
- eslintrc.js:
4.3 Vue 腳手架的自定義配置
方式一：通過 package.json 配置項目 [不推薦使用]
示例如下：
// 必須是符合規范的json語法 "vue":{"devServer":{"port":"9990","open":true} }注： 不推薦使用這種配置方式。因為 package.json 主要用來管理包的配置信息；為了方便維護，推薦將 vue 腳手架相關的配置，單獨定義到 vue.config.js 配置文件中。
方式二：通過單獨的配置文件進行配置
① 在項目的根目錄創建文件 vue.config.js ；
② 在該文件中進行相關配置，從而覆蓋默認配置。
示例如下：
// vue.config.js module.exports = {devServer:{port:8888,open:true} }5. Element-UI 的基本使用
Element-UI：一套為開發者、設計師和產品經理準備的一套基于 2.0 的桌面端組件庫。
官網地址：https://element.eleme.cn/#/zh-CN
補充，基于 Vue 3.0 版本的 Element-UI 已發布，官方地址為：
國內站點：https://element-plus.gitee.io/#/zh-CN
或
國外站點：https://element-plus.org/#/zh-CN/guide/design
Vue 3.0 官網：https://vue3js.cn/docs/
5.1 基于命令行方式手動安裝
安裝依賴包
npm install element-ui -S導入使用：
導入 Element-UI 相關資源
// 導入組件庫 import ElementUI from "element-ui"; // 導入組件相關樣式 import "element-ui/lib/theme-chalk/index.css"; // 配置 Vue 插件 Vue.use(ElementUI)5.2 基于圖形化界面自動安裝
cmd打開控制臺，輸入vue ui并回車運行該命令
自動打開瀏覽器頁面
通過 Vue 項目管理器，進入具體的項目配置面板
點擊 插件 -> 添加插件，進入插件查詢面板
搜索 vue-cli-plugin-element 并安裝
配置插件，實現按需導入，從而減少打包后項目的體積
總結
以上是生活随笔為你收集整理的vue 全家桶 - 前端工程化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL架构与历史【v1】【励志把高性
- 下一篇： Vue3项目 --- Mock.js模拟