當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 全家桶 - 前端工程化

發布時間：2024/9/27 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 代碼，

步驟如下：

項目根目錄下進行如下幾步：

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

npm install --save @babel/polyfill

創建文件 babel.config.js

通過 npx babel-node index.js 執行代碼

A. 安裝 babel

打開終端，輸入命令：

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

安裝過程如下所示：

安裝完畢之后，再次輸入命令安裝：

npm install --save @babel/polyfill

B. 創建 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.js

babel 在運行之前，會先讀取 babel.config.js中的配置信息，然后根據指定的配置信息，來做相關的代碼轉換。

C. 創建 index.js 文件

在項目目錄中創建index.js文件作為入口文件

在index.js中輸入需要執行的 js 代碼，例如：

console.log("ok");

D. 使用 npx 執行文件

打開終端，輸入命令：

npx babel-node ./index.js

1.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 文件，如下：

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

設置 webpack 的自動打包

默認情況下，我們更改入口 js 文件的代碼，需要重新運行命令打包 webpack，才能生成出口的 js 文件，每次都要重新執行命令打包，這是一個非常繁瑣的事情，那么，自動打包 可以解決這樣繁瑣的操作。

---------------【實現自動打包功能的步驟】---------------

1）安裝自動打包功能的包：webpack-dev-server

npm install webpack-dev-server -D

2）修改package.json中的dev指令：

"scripts":{"dev":"webpack-dev-server" }

3）將引入的 js 文件路徑更改為：

4）運行打包命令：

npm run dev

5）打開網址查看效果，網址：

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 -D

2）修改 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 配置信息：

module.exports = {......plugins:[ htmlPlugin ] }

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-loader @babel/core @babel/runtime -D

安裝 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 組件的加載器

安裝 vue 組件的加載器npm install vue-loader vue-template-compiler -D

配置規則

在 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】【励志把高性
下一篇：小程序开发(1)-之目录结构和文件说明

vue

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 基于圖形化界面自動安裝

總結

1.4.2 按需導入與按需導出