好看的言情小说,辰东,旷世神医

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

如何在VueVite應(yīng)用程序中實現(xiàn)暗/亮模式

這篇文章主要為大家展示了“如何在Vue Vite應(yīng)用程序中實現(xiàn)暗/亮模式”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“如何在Vue Vite應(yīng)用程序中實現(xiàn)暗/亮模式”這篇文章吧。

創(chuàng)新互聯(lián)公司專注于貴池網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供貴池營銷型網(wǎng)站建設(shè)，貴池網(wǎng)站制作、貴池網(wǎng)頁設(shè)計、貴池網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造貴池網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供貴池網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

在本文中，我將在不使用任何庫的情況下將dark\Light模式功能實現(xiàn)到我們的Vue Vite應(yīng)用程序中。

我們將首先創(chuàng)建一個簡單的Vite應(yīng)用程序，然后為我們的應(yīng)用程序設(shè)置一個簡單的用戶界面。在創(chuàng)建我們的Vue應(yīng)用程序之前，我想提到WrapPixel提供的一些很棒的免費Vue模板，它們可以免費下載并用于個人和商業(yè)用途。他們可以節(jié)省你的時間，因為你可以直接在你的項目中使用他們令人驚嘆的用戶界面，這將給你的應(yīng)用程序帶來驚人的外觀和感覺，所以一定要去看看。

如何在Vue Vite應(yīng)用程序中實現(xiàn)暗/亮模式

創(chuàng)建一個Vuejs Vite應(yīng)用程序

要設(shè)置Vite應(yīng)用程序，請打開您的終端并輸入以下內(nèi)容：

npm init vite-app themeswitcher

這個命令將搭建一個新的vite應(yīng)用程序，然后進入項目目錄安裝項目依賴項：

cd themeswitcher npm install

安裝后，我們現(xiàn)在可以使用 npm run dev 命令運行我們的應(yīng)用程序：

code . && npm run dev

code . 命令將以VS Code打開我們的應(yīng)用程序。

我們的應(yīng)用程序現(xiàn)在將在端口3000上運行。

隨著應(yīng)用程序的啟動和運行，我們現(xiàn)在可以創(chuàng)建CSS。在 public 目錄內(nèi)創(chuàng)建一個 css/dark.css文件，這是我們將在黑暗模式環(huán)境中存儲所有CSS代碼的地方。

在dark.css文件中添加以下代碼：

:root {   --text: #ffffff;   --background: #1d1d23; }body {   background-color: var(--background) !important; }h2, h3, h4, h5, h6, h7, p, small, a {   color: var(--text) !important; }

現(xiàn)在將在head中創(chuàng)建一個link標簽將其設(shè)置為我們創(chuàng)建的 dark.css 文件，以便可以應(yīng)用在此定義的所有樣式。

我們將使用Javascript類來執(zhí)行此操作，在src目錄中創(chuàng)建 src/theme.js 文件，并添加以下代碼：

export default class themeChanger {     /**      * @constructor      */     constructor() {}     _addDarkTheme() {        const darkThemeLinkEl = document.createElement('link')         darkThemeLinkEl.setAttribute('rel', 'stylesheet')         darkThemeLinkEl.setAttribute('href', './css/dark.css')         darkThemeLinkEl.setAttribute('id', 'dark-theme-style')         const docHead = document.querySelector('head')         docHead.append(darkThemeLinkEl)    }    _removeDarkTheme() {        const darkThemeLinkEl = document.querySelector('#dark-theme-style')         const parentNode = darkThemeLinkEl.parentNode         parentNode.removeChild(darkThemeLinkEl)    }    _darkThemeSwitch() {        const darkThemeLinkEl = document.querySelector('#dark-theme-style')         if (!darkThemeLinkEl) {             this._addDarkTheme()         } else {             this._removeDarkTheme()         }    }}

我們創(chuàng)建3種方法：

_addDarkTheme()：這會將link標簽添加到應(yīng)用程序的HTML head中。
_removeDarkTheme()：這將刪除已添加到HTML head的link標簽。
_darkThemeSwitch()：這將切換添加和刪除方法，以在我們的HTML head中添加和刪除link標簽。

我們可以繼續(xù)在Vue.js組件中使用此方法。

編輯 components/HelloWorld.vue 中的代碼，如下所示：

我們引入 themeChanger 類的實例，然后將其存儲在Vue.js data實例中。然后，我們創(chuàng)建一個按鈕，該按鈕將調(diào)用我們在 theme.js 文件中創(chuàng)建的 _darkThemeSwitch。

完成此操作后，我們現(xiàn)在可以在應(yīng)用程序中在明暗模式之間切換。

以上是“如何在Vue Vite應(yīng)用程序中實現(xiàn)暗/亮模式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標題名稱：如何在VueVite應(yīng)用程序中實現(xiàn)暗/亮模式
本文來源：http://fisionsoft.com.cn/article/gidegh.html

新聞中心

Vite is the future of Frontend Developement.

其他資訊