基于vue實(shí)現(xiàn)pdf預(yù)覽功能
1 技術(shù)背景
1.1 Vue.js 簡介和特點(diǎn)
Vue.js 是一種用于構(gòu)建用戶界面的漸進(jìn)式框架。它具有以下特點(diǎn)：
- 易學(xué)易用：Vue.js 的 API 設(shè)計(jì)簡單直觀，使得開發(fā)者可以快速上手。
- 響應(yīng)式數(shù)據(jù)綁定：Vue.js 使用了響應(yīng)式的數(shù)據(jù)綁定機(jī)制，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，頁面會(huì)自動(dòng)更新。
- 組件化開發(fā)：Vue.js 支持組件化開發(fā)，將界面拆分為多個(gè)獨(dú)立可復(fù)用的組件，提高代碼的可維護(hù)性和復(fù)用性。
- 虛擬 DOM：Vue.js 使用虛擬 DOM 技術(shù)，在內(nèi)存中維護(hù)一個(gè)虛擬的 DOM 樹，通過比較新舊 DOM 樹的差異，最小化操作真實(shí) DOM 的次數(shù)，提升性能。
1.2 PDF.js 庫簡介和功能概述
PDF.js 是一個(gè)由 Mozilla 開發(fā)的 JavaScript 庫，用于在 Web 上顯示 PDF 文件。它具有以下功能：
- 在瀏覽器中原生渲染 PDF：PDF.js 可以直接在瀏覽器中渲染 PDF 文件，無需依賴外部插件或軟件。
- 支持基本的查看和導(dǎo)航功能：PDF.js 提供了一些基本的查看和導(dǎo)航功能，如縮放、翻頁、搜索等。
- 自定義樣式和交互：PDF.js 允許開發(fā)者通過 API 自定義 PDF 文件的顯示樣式和交互行為。
- 跨平臺(tái)支持：PDF.js 可以在各種現(xiàn)代瀏覽器和操作系統(tǒng)上運(yùn)行，包括桌面和移動(dòng)設(shè)備。
1.3 為什么選擇 Vue 和 PDF.js 結(jié)合實(shí)現(xiàn) PDF 預(yù)覽功能
結(jié)合 Vue 和 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽功能有以下優(yōu)勢：
- Vue 提供了響應(yīng)式數(shù)據(jù)綁定和組件化開發(fā)的特性，可以方便地管理 PDF 預(yù)覽組件的狀態(tài)和邏輯。
- PDF.js 是一個(gè)功能強(qiáng)大且易于使用的 JavaScript 庫，提供了原生渲染 PDF 的能力，并且具有自定義樣式和交互的靈活性。
- Vue 和 PDF.js 都是流行的前端技術(shù)，社區(qū)支持和文檔資源豐富，可以幫助開發(fā)者更快速地實(shí)現(xiàn) PDF 預(yù)覽功能。
- 結(jié)合 Vue 和 PDF.js 還可以充分利用 Vue 的生態(tài)系統(tǒng)和插件庫，如 Vuex、Vue Router 等，進(jìn)一步擴(kuò)展和增強(qiáng) PDF 預(yù)覽功能。
2 開發(fā)環(huán)境準(zhǔn)備
在開始使用 Vue.js 和 PDF.js 結(jié)合實(shí)現(xiàn) PDF 預(yù)覽功能之前，你需要準(zhǔn)備開發(fā)環(huán)境。以下是一些步驟來幫助您完成這個(gè)過程：
2.1 安裝 Node.js 和 Vue CLI
首先，你需要安裝 Node.js 和 npm（Node 包管理器）。Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行時(shí)環(huán)境，用于在服務(wù)器端運(yùn)行 JavaScript 代碼。npm 是 Node.js 的默認(rèn)軟件包管理器，用于安裝和管理項(xiàng)目所需的依賴項(xiàng)。
你可以從 Node.js 官方網(wǎng)站（https://nodejs.org）下載并安裝適合你操作系統(tǒng)的最新版本的 Node.js。安裝完畢后，打開終端或命令提示符窗口，并輸入以下命令來驗(yàn)證 Node.js 和 npm 是否成功安裝：
node -v npm -v
接下來，你需要全局安裝 Vue CLI（Vue Command Line Interface），它是一個(gè)用于快速創(chuàng)建 Vue 項(xiàng)目的工具。在終端或命令提示符窗口中運(yùn)行以下命令進(jìn)行安裝：
npm install -g @vue/cli
安裝完成后，你可以通過運(yùn)行以下命令來檢查 Vue CLI 是否成功安裝：
vue --version
2.2 創(chuàng)建 Vue 項(xiàng)目
安裝 Vue CLI 后，你可以使用它來創(chuàng)建一個(gè)新的 Vue 項(xiàng)目了。在終端或命令提示符窗口中，進(jìn)入你想要?jiǎng)?chuàng)建項(xiàng)目的目錄，并運(yùn)行以下命令：
vue create my-project
這將提示你選擇一些配置選項(xiàng)來創(chuàng)建項(xiàng)目你可以使用默認(rèn)選項(xiàng)，也可以根據(jù)需要進(jìn)行自定義配置。完成配置后，Vue CLI 將下載所需的依賴項(xiàng)并創(chuàng)建一個(gè)新的 Vue 項(xiàng)目。
在項(xiàng)目創(chuàng)建完成后，進(jìn)入項(xiàng)目目錄：
cd my-project
現(xiàn)在，你已經(jīng)準(zhǔn)備好開始開發(fā)了！你可以使用任何喜歡的代碼編輯器打開項(xiàng)目文件夾，并按照下一步的指導(dǎo)繼續(xù)進(jìn)行 PDF 預(yù)覽功能的實(shí)現(xiàn)。
3 集成 PDF.js 到 Vue 項(xiàng)目
為了將PDF.js集成到Vue項(xiàng)目中，您可以按照以下步驟進(jìn)行操作：
3.1 下載和引入 PDF.js 庫
首先，您需要下載PDF.js庫。您可以從官方GitHub倉庫（https://github.com/mozilla/pdf.js）下載最新版本的PDF.js。
一旦您下載了PDF.js，將其解壓縮并復(fù)制到您的Vue項(xiàng)目的文件夾中。然后，在您的Vue項(xiàng)目中創(chuàng)建一個(gè)名為pdfjs的文件夾，并將解壓縮后的PDF.js文件粘貼到該文件夾中。
接下來，在您的Vue項(xiàng)目中找到public/index.html文件，并在文件的<head>標(biāo)簽內(nèi)添加以下代碼以引入PDF.js庫：
<script src="./pdfjs/build/pdf.js"></script>
這樣就完成了PDF.js庫的引入。
3.2 在 Vue 組件中使用<canvas>元素展示 PDF 頁面
要在Vue組件中顯示PDF頁面，您可以使用HTML5的<canvas>元素。在您希望顯示PDF的組件模板中，添加一個(gè)<canvas>元素作為容器：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>這個(gè)<canvas>元素將用于渲染PDF頁面。
3.3 使用 PDF.js 提供的 API 加載和渲染 PDF 文件
現(xiàn)在，您可以在Vue組件的JavaScript部分編寫加載和渲染PDF文件的邏輯。在Vue組件的<script>標(biāo)簽中，添加以下代碼：
export default {
mounted() {
this.loadPDF();
},
methods: {
async loadPDF() {
const pdfUrl = 'path/to/your/pdf/file.pdf'; // 替換為您的PDF文件路徑
const loadingTask = window.PDFJS.getDocument(pdfUrl);
const pdf = await loadingTask.promise;
const canvas = this.$refs.pdfCanvas;
const context = canvas.getContext('2d');
const page = await pdf.getPage(1); // 加載第一頁
const viewport = page.getViewport({ scale: 1 });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext);
}
}
}上述代碼首先使用window.PDFJS.getDocument()方法加載PDF文件，并返回一個(gè)Promise對象。然后，我們獲取<canvas>元素和其上下文（context）。接下來，我們使用pdf.getPage()方法加載PDF的第一頁，并通過page.getViewport()方法獲取頁面的視口信息。
之后，我們設(shè)置<canvas>元素的高度和寬度以適應(yīng)頁面視圖，并創(chuàng)建一個(gè)渲染上下文對象。最后，我們調(diào)用page.render()方法將PDF頁面渲染到<canvas>元素上。
3.4 實(shí)現(xiàn)頁面切換和縮放功能
要實(shí)現(xiàn)PDF頁面的切換和縮放功能，您可以編寫一些額外的方法并在模板中綁定相應(yīng)的事件。
例如，您可以添加兩個(gè)按鈕來實(shí)現(xiàn)上一頁和下一頁的切換功能：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
<button @click="previousPage">Previous Page</button>
<button @click="nextPage">Next Page</button>
</div>
</template>然后，在Vue組件的JavaScript部分添加以下代碼：
export default {
data() {
return {
pdf: null,
currentPage: 1
};
},
mounted() {
this.loadPDF();
},
methods: {
async loadPDF() {
// ...
},
async previousPage() {
if (this.currentPage > 1) {
this.currentPage--;
await this.renderPage(this.currentPage);
}
},
async nextPage() {
if (this.currentPage < this.pdf.numPages) {
this.currentPage++;
await this.renderPage(this.currentPage);
}
},
async renderPage(pageNumber) {
const page = await this.pdf.getPage(pageNumber);
const viewport = page.getViewport({ scale: 1 });
const canvas = this.$refs.pdfCanvas;
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext);
}
}
}在這個(gè)例子中，我們使用data()方法初始化了一個(gè)名為currentPage的變量，并將其綁定到模板中。然后，我們編寫了previousPage()和nextPage()方法來更新currentPage并調(diào)用renderPage()方法重新渲染頁面。
通過這種方式，你可以實(shí)現(xiàn)簡單的頁面切換功能。類似地，你還可以編寫其他方法來實(shí)現(xiàn)縮放、頁碼跳轉(zhuǎn)等功能。
4 處理 PDF 加載和錯(cuò)誤
在 Vue 項(xiàng)目中集成 PDF.js 時(shí)，你可以通過以下步驟來處理 PDF 加載和錯(cuò)誤：
4.1 顯示加載進(jìn)度條
要顯示加載進(jìn)度條，你可以使用 Vue 框架的組件和狀態(tài)管理。首先，在你的 Vue 組件中創(chuàng)建一個(gè)loading變量來表示 PDF 是否正在加載：
data() {
return {
loading: true,
};
},然后，在模板中根據(jù)loading變量的值來顯示或隱藏加載進(jìn)度條。你可以使用 Vue 的條件渲染指令（v-if）來實(shí)現(xiàn)這一點(diǎn)。例如，你可以在模板中添加一個(gè)全屏的加載動(dòng)畫組件，并將其與loading變量關(guān)聯(lián)起來：
<template>
<div>
<loading-spinner v-if="loading"></loading-spinner>
<!-- 其他內(nèi)容 -->
</div>
</template>當(dāng) PDF 開始加載時(shí)，將loading變量設(shè)置為true，加載完成后將其設(shè)置為false。
4.2 處理加載錯(cuò)誤和異常情況
PDF.js 提供了一些 API 來處理加載錯(cuò)誤和異常情況。你可以使用這些 API 來捕獲并處理加載過程中可能發(fā)生的錯(cuò)誤。
首先，在 Vue 組件的方法中，使用 PDF.js 的getDocument()函數(shù)來加載 PDF 文件。這個(gè)函數(shù)返回一個(gè) Promise 對象，你可以使用.catch()方法來捕獲加載過程中的錯(cuò)誤：
loadPDF() {
PDFJS.getDocument('/path/to/pdf/file.pdf')
.then((pdf) => {
// 加載成功后的處理邏輯
})
.catch((error) => {
// 加載錯(cuò)誤時(shí)的處理邏輯
});
},在catch()方法中，你可以根據(jù)具體的錯(cuò)誤類型來執(zhí)行相應(yīng)的操作。例如，如果加載失敗，你可以顯示一個(gè)錯(cuò)誤提示信息：
.catch((error) => {
console.error('PDF 加載錯(cuò)誤:', error);
this.showErrorMessage = true;
});在模板中，你可以使用條件渲染指令（v-if）來顯示錯(cuò)誤消息：
<template>
<div>
<div v-if="showErrorMessage" class="error-message">PDF 加載失敗，請重試。</div>
<!-- 其他內(nèi)容 -->
</div>
</template>這樣，當(dāng)發(fā)生加載錯(cuò)誤時(shí)，錯(cuò)誤消息將被顯示出來。
除了捕獲加載錯(cuò)誤外，你還可以使用 PDF.js 提供的其他 API 來處理異常情況。例如，你可以使用pdf.numPages屬性獲取 PDF 文件的總頁數(shù)，并在加載完成后進(jìn)行一些額外的處理。
5 實(shí)現(xiàn)其他功能
5.1 頁碼控制
要實(shí)現(xiàn)頁碼控制功能，你可以在 Vue 項(xiàng)目中創(chuàng)建一個(gè)輸入框或下拉列表，用于用戶輸入或選擇所需的頁面號碼。然后，在用戶提交表單或選擇頁碼后，你可以使用 PDF.js 提供的 API 將視圖定位到指定的頁面。
首先，你需要在 Vue 組件中定義一個(gè)變量來存儲(chǔ)當(dāng)前頁碼，例如currentPage。然后，你可以在模板中創(chuàng)建一個(gè)輸入框或下拉列表，并綁定它與currentPage變量。當(dāng)用戶更改頁碼時(shí)，currentPage變量會(huì)自動(dòng)更新。
接下來，你需要在 Vue 組件的方法中處理頁碼變化的邏輯。你可以使用 PDF.js 提供的pdfViewer.scrollPageIntoView()方法將視圖滾動(dòng)到指定的頁面。例如：
methods: {
goToPage() {
// 將字符串轉(zhuǎn)換為數(shù)字類型
const pageNumber = parseInt(this.currentPage, 10);
if (pageNumber >= 1 && pageNumber <= this.totalPages) {
pdfViewer.scrollPageIntoView({
pageNumber,
});
}
},
},在上面的代碼中，我們首先將用戶輸入的頁碼轉(zhuǎn)換為數(shù)字類型，并確保其在有效范圍內(nèi)（從 1 到總頁面數(shù)）。然后，我們使用scrollPageIntoView()方法將視圖滾動(dòng)到指定的頁面。
最后，你可以在模板中添加一個(gè)按鈕或提交表單的事件監(jiān)聽器，以便在用戶點(diǎn)擊按鈕或提交表單時(shí)調(diào)用goToPage()方法。
5.2 縮略圖導(dǎo)航
要實(shí)現(xiàn)縮略圖導(dǎo)航功能，你可以使用 PDF.js 提供的pdfThumbnailViewer對象來顯示縮略圖。首先，你需要在 Vue 組件中創(chuàng)建一個(gè)元素，用于容納縮略圖。然后，在 Vue 組件的生命周期鉤子函數(shù)（如mounted）中初始化縮略圖，并將其綁定到相應(yīng)的元素上。
mounted() {
const thumbnailContainer = document.getElementById('thumbnail-container');
pdfThumbnailViewer.initialize(thumbnailContainer, pdfDocument);
},在上面的代碼中，我們首先通過getElementById()方法獲取縮略圖容器的 DOM 元素。然后，我們使用initialize()方法將縮略圖初始化并綁定到容器上。
最后，你可以在模板中添加一個(gè)具有唯一 ID 的元素，作為縮略圖容器的占位符。
<div id="thumbnail-container"></div>
這樣，當(dāng) Vue 組件被掛載時(shí)，縮略圖就會(huì)自動(dòng)加載和顯示在指定的容器中了。
5.3 文本搜索功能
要實(shí)現(xiàn)文本搜索功能，你可以使用 PDF.js 提供的pdfFindController對象來執(zhí)行文本搜索操作。首先，你需要在 Vue 組件中創(chuàng)建一個(gè)輸入框，用于用戶輸入要搜索的關(guān)鍵字。然后，在 Vue 組件的方法中處理搜索邏輯。
首先，你需要定義一個(gè)變量來存儲(chǔ)用戶輸入的關(guān)鍵字，例如searchKeyword。然后，在用戶提交表單或按下回車鍵時(shí)，你可以使用 PDF.js 提供的pdfFindController.executeCommand()方法執(zhí)行搜索操作。
methods: {
search() {
pdfFindController.executeCommand('find', {
query: this.searchKeyword,
highlightAll: true,
});
},
},在上面的代碼中，我們使用executeCommand()方法執(zhí)行搜索命令，并傳遞一個(gè)包含查詢關(guān)鍵字和是否高亮所有匹配項(xiàng)的配置對象。
最后，你可以在模板中添加一個(gè)按鈕或提交表單的事件監(jiān)聽器，以便在用戶點(diǎn)擊按鈕或提交表單時(shí)調(diào)用search()方法。
這樣，當(dāng)用戶進(jìn)行文本搜索時(shí)，PDF.js 會(huì)自動(dòng)查找并高亮與關(guān)鍵字匹配的文本內(nèi)容。
6 優(yōu)化和性能調(diào)優(yōu)
優(yōu)化和性能調(diào)優(yōu)是確保應(yīng)用程序高效運(yùn)行的重要方面。在實(shí)現(xiàn) PDF 預(yù)覽功能時(shí)，以下是一些優(yōu)化和性能調(diào)優(yōu)的建議：
6.1 懶加載 PDF 頁面
懶加載是指在需要顯示頁面時(shí)才進(jìn)行加載，而不是一次性加載所有頁面。這可以提高初始加載速度并減少資源占用。你可以使用 Vue 的異步組件或按需加載來實(shí)現(xiàn)懶加載 PDF 頁面。
6.2 緩存已加載的頁面
為了避免每次切換頁面都重新加載 PDF 文件，你可以將已加載的頁面緩存在客戶端（如瀏覽器）中。這樣，在用戶再次訪問相同頁面時(shí)，可以直接從緩存中獲取頁面，而不必重新下載和渲染 PDF 文件。
6.3 壓縮和優(yōu)化 PDF 文件大小
PDF 文件的大小對加載時(shí)間和性能有很大影響。你可以使用各種工具和技術(shù)來壓縮和優(yōu)化 PDF 文件的大小。例如，可以使用 Adobe Acrobat 等專業(yè)工具進(jìn)行優(yōu)化，刪除不必要的元數(shù)據(jù)、嵌入字體子集、壓縮圖像等。另外，還可以考慮使用 WebP 格式替代 JPEG 格式來進(jìn)一步減小文件大小。
通過以上優(yōu)化和性能調(diào)優(yōu)措施，你可以改善 PDF 預(yù)覽功能的加載速度和性能，并提供更好的用戶體驗(yàn)。
7 測試和排錯(cuò)
7.1 使用測試工具進(jìn)行功能和性能測試
在開發(fā) Vue 項(xiàng)目中實(shí)現(xiàn) PDF 預(yù)覽功能后，使用測試工具可以幫助我們驗(yàn)證功能的正確性并評估性能。以下是一些常用的測試工具：
- Jest：Jest 是一個(gè)流行的 JavaScript 測試框架，適用于單元測試和集成測試。你可以編寫針對 PDF 預(yù)覽組件的各種測試用例，并使用 Jest 運(yùn)行這些測試。
- Puppeteer：Puppeteer 是一個(gè) Node.js 庫，提供了控制 Headless Chrome 瀏覽器的 API。你可以使用 Puppeteer 模擬用戶與 PDF 預(yù)覽界面的交互操作，并檢查預(yù)期的結(jié)果是否符合預(yù)期。
- Cypress：Cypress 是一個(gè)端到端的前端測試框架，可以模擬用戶在真實(shí)瀏覽器環(huán)境下與應(yīng)用程序進(jìn)行交互。你可以使用 Cypress 編寫自動(dòng)化測試腳本來測試 PDF 預(yù)覽功能，并生成詳細(xì)的測試報(bào)告。
7.2 排查和解決常見問題和錯(cuò)誤
在開發(fā)過程中，可能會(huì)遇到一些常見的問題和錯(cuò)誤。以下是一些排查和解決問題的建議：
- 查看瀏覽器控制臺(tái)輸出：當(dāng) PDF 預(yù)覽功能出現(xiàn)問題時(shí)，打開瀏覽器的開發(fā)者工具，查看控制臺(tái)輸出以獲取潛在的錯(cuò)誤信息。
- 檢查網(wǎng)絡(luò)請求：確保 PDF 文件正確加載并返回了預(yù)期的內(nèi)容。檢查網(wǎng)絡(luò)請求的狀態(tài)碼、響應(yīng)頭和響應(yīng)體，以確定是否存在問題。
- 檢查依賴項(xiàng)版本：如果使用了第三方庫或插件來實(shí)現(xiàn) PDF 預(yù)覽功能，請確保所使用的版本與你的項(xiàng)目兼容，并且沒有已知的問題或錯(cuò)誤。
- 閱讀文檔和社區(qū)支持：閱讀相關(guān)庫的官方文檔，查找常見問題和解決方案。此外，參與開發(fā)者社區(qū)，尋求幫助和建議。
- 調(diào)試代碼：使用調(diào)試工具（如 Chrome DevTools）在代碼中設(shè)置斷點(diǎn)，逐步執(zhí)行代碼并觀察變量和函數(shù)的值，以找出潛在的問題。
- 縮小范圍：如果問題無法解決，嘗試縮小問題范圍，創(chuàng)建一個(gè)簡化的示例項(xiàng)目或復(fù)制到 CodeSandbox 等在線編輯器上進(jìn)行測試，以確定問題是源于你的代碼還是環(huán)境配置。
通過以上方法，你可以更好地排查和解決常見問題和錯(cuò)誤，確保 PDF 預(yù)覽功能的正常運(yùn)行。
8 總結(jié)
在本文中，我們學(xué)習(xí)了如何在 Vue 環(huán)境中實(shí)現(xiàn) PDF 預(yù)覽功能。我們引導(dǎo)讀者完成了項(xiàng)目的依賴安裝和配置，并介紹了如何選擇和使用適合的 PDF 渲染庫。我們展示了如何加載和顯示 PDF 文件，添加了導(dǎo)航工具和其他功能，為用戶提供了更好的閱讀體驗(yàn)。
通過本文的指導(dǎo)，讀者可以快速上手并在自己的 Vue 項(xiàng)目中實(shí)現(xiàn) PDF 預(yù)覽功能。無論你是初學(xué)者還是有經(jīng)驗(yàn)的開發(fā)者，本文都為你提供了清晰的步驟和示例代碼，幫助你輕松完成任務(wù)。
PDF 預(yù)覽功能可以在各種場景中發(fā)揮重要作用，例如在線文檔閱讀、電子書閱讀器等。希望本文能夠幫助你添加這一功能，并提升用戶體驗(yàn)。
到此這篇關(guān)于基于vue實(shí)現(xiàn)pdf預(yù)覽功能的文章就介紹到這了,更多相關(guān)vue pdf預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了vue父子組件相互通信方式示例梳理總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
內(nèi)存泄露是指new了一塊內(nèi)存，但無法被釋放或者被垃圾回收。這篇文章主要介紹了vue使用中的內(nèi)存泄漏,需要的朋友可以參考下2018-07-07
VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法分析
這篇文章主要介紹了VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法,結(jié)合實(shí)例形式詳細(xì)分析了VUE使用JS修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下2019-12-12
詳解vue-cli 快速搭建單頁應(yīng)用之遇到的問題及解決辦法
這篇文章主要介紹了詳解vue-cli 快速搭建單頁應(yīng)用之遇到的問題及解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
詳解使用vue-router進(jìn)行頁面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件
本篇文章主要介紹了詳解使用vue-router進(jìn)行頁面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue環(huán)境搭建+VSCode+Win10的詳細(xì)教程
這篇文章主要介紹了Vue環(huán)境搭建+VSCode+Win10,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-10-10
vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果
這篇文章主要介紹了vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
項(xiàng)目在線上會(huì)遇到管理員類似權(quán)限比較大的用戶,會(huì)在同一瀏覽器登陸多個(gè)賬號,遇到這樣的問題如何處理呢,下面小編給大家介紹vue同一瀏覽器登錄多賬號處理方法,感興趣的朋友一起看看吧2024-01-01