Vue?2?項目中配置?Tailwind?CSS?和?Font?Awesome?的最佳實踐舉例
Vue 2 項目中配置 Tailwind CSS 和 Font Awesome 的最佳實踐
一、Tailwind CSS 配置
1. 安裝依賴
npm install tailwindcss@^2.2 postcss@^7 autoprefixer@^9
2. 創(chuàng)建配置文件
npx tailwindcss init
3. 創(chuàng)建樣式文件
在 src/assets/tailwind.css 中添加：
@tailwind base; @tailwind components; @tailwind utilities;
4. 配置 PostCSS
創(chuàng)建 postcss.config.js：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}5. 引入樣式
在 main.js 中：
import '@/assets/tailwind.css';
6. 測試配置
在 App.vue 中添加測試代碼：
<template>
<div class="p-4">
<h1 class="text-2xl font-bold text-blue-500">TailwindCSS 是否生效？</h1>
<button class="mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
測試按鈕
</button>
</div>
</template>第二種引入方式基本和第一種相同，不同的是直接引入：
import "tailwindcss/tailwind.css"
參考：見文末補充介紹。
二、引入方式的對比
| 特性 | import "tailwindcss/tailwind.css" | import '@/assets/css/tailwind.css' |
|---|---|---|
| 是否可定制 Tailwind | ? 不可以 | ? 可以 |
是否使用 @tailwind 指令 | ? 不使用 | ? 使用 |
| 是否支持 PurgeCSS/裁剪 | ? 默認不裁剪 | ? 支持 |
| 是否適合生產(chǎn)環(huán)境 | ? 主要用于 demo | ? 適合生產(chǎn)環(huán)境 |
推薦：正式項目使用 @tailwind 指令方式（第二種）
三、Font Awesome 配置（引入 Font Awesome 圖標）
方法一：CDN 引入（簡單快速）
在 public/index.html 中添加：
<link rel="stylesheet" rel="external nofollow" />
使用示例：
<i class="fa-solid fa-qrcode text-2xl text-primary"></i>
方法二：npm 安裝（推薦生產(chǎn)環(huán)境）
安裝依賴：
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome
在 main.js 中配置：
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faQrcode } from '@fortawesome/free-solid-svg-icons'
import { faWeixin } from '@fortawesome/free-brands-svg-icons'
library.add(faQrcode, faWeixin)
Vue.component('font-awesome-icon', FontAwesomeIcon)使用示例：
<font-awesome-icon :icon="['fas', 'qrcode']" class="text-2xl text-primary" /> <font-awesome-icon :icon="['fab', 'weixin']" class="text-xl" />
四、總結對比
| 使用方式 | 優(yōu)點 | 缺點 |
|---|---|---|
| CDN 引入 | 簡單、快速 | 無法按需加載，文件較大 |
| npm 引入 + 組件方式 | 可按需加載圖標，靈活 | 需安裝和注冊，稍復雜 |
推薦：生產(chǎn)環(huán)境使用 npm 安裝方式
補充：tailwindcss vue2簡單配置
1.安裝
最新的tailwind css使用post css 8版本，vue2不支持，所以需要指定安裝postcss7的版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
2.生成配置文件
在終端中輸入代碼:npx tailwindcss init生成一個空的配置文件。也可以生成一個包含所有默認配置的配置文件:npx tailwindcss init -fill。
npx tailwindcss init # 空的 npx tailwindcss init -fill # 包含默認的
這就創(chuàng)建了一個簡單的配置文件，你可以在這個文件里定制你的tailwindcss （參考官網(wǎng)文檔）
3.創(chuàng)建postcss文件
在項目的根目錄下創(chuàng)建postcss.config.js文件。輸入以下代碼：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}4.在main.js中引入
import "tailwindcss/tailwind.css"
總結
在vue2中安裝引入tailwindcss的方法主要分為4步
- 安裝對應版本的tailwindcss
- 使用代碼生成配置文件
- 創(chuàng)建postcss.config.js文件
- 在main.js中引入
- tailwindcss使用方法簡單，可以在官網(wǎng)的文檔中查看具體的使用方法。
到此這篇關于Vue 2 項目中配置 Tailwind CSS 和 Font Awesome 的最佳實踐的文章就介紹到這了,更多相關Vue配置 Tailwind CSS 和 Font Awesome內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue使用axios導出后臺返回的文件流為excel表格詳解
這篇文章主要介紹了vue使用axios導出后臺返回的文件流為excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vux是Vue.js的一個ui庫，官網(wǎng)在這里，官方文檔的配置指南側重于技術的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學習吧2017-12-12
Elementui?el-input輸入框校驗及表單校驗實例代碼
輸入框是使用非常多的元素,用來輸入用戶名、密碼等等信息,Element提供了功能和樣式豐富的輸入框,下面這篇文章主要給大家介紹了關于Elementui?el-input輸入框校驗及表單校驗的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue項目如何根據(jù)不同運行環(huán)境打包項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用Vue.$set()或者Object.assign()修改對象新增響應式屬性的方法
vue代碼中,只要在data對象里定義的對象,賦值后,任意一個屬性值發(fā)生變化，視圖都會實時變化，這篇文章主要介紹了使用Vue.$set()或者Object.assign()修改對象新增響應式屬性,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了VUE搭建手機商城心得和遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
最近一直在做的項目是Vue2搭建的項目，本文主要介紹了Vue全局自定義指令Modal拖拽的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3新特性Composition?API實戰(zhàn)指南
Vue3的發(fā)布標志著這個流行前端框架的重大升級,其中最引人注目的變化是引入了Composition?API,本文將深入探討Vue3的新特性,特別是Composition?API的實際應用,幫助開發(fā)者掌握這一強大工具,需要的朋友可以參考下2025-07-07
vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空
這篇文章主要介紹了vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08