整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
歌瀏覽器簡(jiǎn)潔清爽的界面、暢快的瀏覽體驗(yàn)、資源豐富的插件，也讓它成了前端開(kāi)發(fā)人員所喜愛(ài)的瀏覽器。而好用的插件，能幫助開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中減少很多工作量，帶來(lái)如虎添翼的效果。今天就給大家推薦一些非常實(shí)用、在程序員中口碑也較好的Chrome插件，下面和千鋒廣州小編一起來(lái)看看吧！
一、Lighthouse前端性能優(yōu)化測(cè)試工具
對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，自己開(kāi)發(fā)的App或者Web page性能的好壞，常常是肉眼很難辨別的。這時(shí)候就需要專(zhuān)業(yè)的網(wǎng)站測(cè)試工具，通過(guò)這些具象化的分析報(bào)告，才能更直觀(guān)地知道產(chǎn)品還有哪些需要優(yōu)化的地方。Lighthouse插件就是這樣一款開(kāi)源的自動(dòng)化檢測(cè)工具，由谷歌官方團(tuán)隊(duì)提供，正兒八經(jīng)的行業(yè)標(biāo)桿。
Lighthouse插件可以對(duì)需要測(cè)試的頁(yè)面運(yùn)行一系列評(píng)估，然后反饋給開(kāi)發(fā)者詳細(xì)的優(yōu)化指導(dǎo)建議。主要包括網(wǎng)站頁(yè)面性能、PWA、可訪(fǎng)問(wèn)性（無(wú)障礙）、SEO等內(nèi)容。
開(kāi)發(fā)者能夠根據(jù)這些標(biāo)準(zhǔn)進(jìn)行網(wǎng)站優(yōu)化和完善，提高用戶(hù)體驗(yàn)，再也不用盲目地一通亂改了。下載地址：http://uee.me/cQCz2
二、Vue.js devtools調(diào)試插件
Vue.js devtools是一款在Chrome商店和火狐商店里擁有上百萬(wàn)用戶(hù)的人氣插件，有“Vue調(diào)試神器”的稱(chēng)號(hào)。由于Vue是數(shù)據(jù)驅(qū)動(dòng)的，所以開(kāi)發(fā)者在開(kāi)發(fā)調(diào)試中查看DOM結(jié)構(gòu)不能夠解析出什么。但是借助Vue.js devtools這款插件，大家就可以很方便地對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試了。
安裝好插件后，再按F12打開(kāi)開(kāi)發(fā)者工具，在開(kāi)發(fā)者工具的菜單欄最后面會(huì)看到VUE，選中它就進(jìn)行行云流水的操作了。
下載地址：http://uee.me/cQC2h同類(lèi)的調(diào)試工具，比較出名的還有Facebook出品的React Developer Tools插件。安裝這款插件后，再在谷歌瀏覽器中進(jìn)行調(diào)試時(shí)，就可以查看應(yīng)用程序的React組件分層結(jié)構(gòu)，而不是神秘的瀏覽器DOM了。
下載地址：http://rrd.me/fFaeD
三、WEB前端助手(FeHelper)
一款國(guó)產(chǎn)的、超級(jí)實(shí)用的前端開(kāi)發(fā)工具合集，之前也用專(zhuān)文介紹過(guò)這款插件。WEB前端助手(FeHelper)包含多個(gè)獨(dú)立小應(yīng)用，比如：Json工具、代碼美化、代碼壓縮、二維碼、Postman、markdown、網(wǎng)頁(yè)油猴、便簽筆記、信息加密與解密、隨機(jī)密碼生成、Crontab等等。
它基本涵蓋了前端開(kāi)發(fā)經(jīng)常會(huì)使用到的所有基礎(chǔ)功能。由于WEB前端助手是國(guó)人開(kāi)發(fā)，所以大家用起來(lái)會(huì)更加順手。
下載地址：http://uee.me/cQC2z
四、Wappalyzer網(wǎng)站技術(shù)分析插件
開(kāi)發(fā)者有時(shí)候也是需要在別人的網(wǎng)站上尋找靈感和借鑒長(zhǎng)處的。那么，當(dāng)我們?cè)跒g覽到一個(gè)感覺(jué)很不錯(cuò)的網(wǎng)站，想知道他們運(yùn)用了什么框架和技術(shù)時(shí)該怎么辦呢？這個(gè)時(shí)候，Wappalyzer就能幫上忙了。Wappalyzer是一款功能強(qiáng)大的、且非常實(shí)用的Chrome網(wǎng)站技術(shù)分析插件。
它能夠分析網(wǎng)站所采用的平臺(tái)構(gòu)架、網(wǎng)站環(huán)境、服務(wù)器配置環(huán)境、JavaScript框架、編程語(yǔ)言等參數(shù)。安裝完畢后，在你感興趣的網(wǎng)頁(yè)點(diǎn)擊Wappalyzer的插件圖標(biāo)，就能在下拉窗口里面看到這個(gè)網(wǎng)站用到的框架和技術(shù)了。
下載地址：http://uee.me/cQC29
五、Web Maker網(wǎng)頁(yè)代碼編輯器
作為一名開(kāi)發(fā)人員，大家可能已經(jīng)用過(guò)了許多代碼編輯器。的確是有很多編輯器的功能十分強(qiáng)大，但是在一些需要快速記錄代碼的緊急場(chǎng)合中，打開(kāi)這些編輯器就顯得比較麻煩了。Web Maker就是一款能快速在瀏覽器上編寫(xiě)網(wǎng)頁(yè)代碼的Chrome插件。
它可以讓你的谷歌瀏覽器擁有即時(shí)編輯代碼的功能，主要用于編寫(xiě)HTML、CSS和JavaScript代碼。安裝插件后，只需點(diǎn)擊插件圖標(biāo)即可在新窗口中進(jìn)行工作。最重要的是， Web Maker支持離線(xiàn)使用和代碼自動(dòng)保存。如果你覺(jué)得黑色太單調(diào)，還有多個(gè)編輯器主題和其他可配置的設(shè)置。
下載地址：http://uee.me/cQC2K
以上就是今天的推薦，你常用的前端擴(kuò)展插件有哪些，歡迎留言和千鋒廣州小編一起討論哦！
站建設(shè)CSS3中引入的新特性和功能。這些新特性極大地增加了web程序的表現(xiàn)能力，同時(shí)簡(jiǎn)化了web UI的編程模型。下面成都網(wǎng)站建設(shè)蜀風(fēng)科技將詳細(xì)介紹這些CSS3的新增特性。
1、強(qiáng)大的選擇器
網(wǎng)站建設(shè)CSS3的選擇器在CSS2.1的基礎(chǔ)上進(jìn)行了增強(qiáng)，它允許設(shè)計(jì)師在標(biāo)簽中指定特定的HTML元素而不必使用多余的類(lèi)、ID或者JavaScript腳本。
如果希望設(shè)計(jì)出簡(jiǎn)潔、輕量級(jí)的網(wǎng)頁(yè)標(biāo)簽，希望結(jié)構(gòu)與表現(xiàn)更好地分離，高級(jí)選擇器是非常有用的。它可以大大簡(jiǎn)化我們的工作，提供編寫(xiě)代碼效率，并讓我們很方便地制作出可維護(hù)性的頁(yè)面。
2、半透明度效果的實(shí)現(xiàn)
網(wǎng)站建設(shè)中RGBA不僅可以設(shè)定色彩，還能設(shè)定元素的透明度。無(wú)論是文本、背景還是邊框均可使用該屬性。該屬性的語(yǔ)法在其支持的瀏覽器中形同。
3、多欄布局
網(wǎng)站建設(shè)新的CSS3選擇器可以讓用戶(hù)不必使用多個(gè)DIV標(biāo)簽就能實(shí)現(xiàn)多欄布局。瀏覽器解釋這個(gè)屬性并生成多欄，讓文本實(shí)現(xiàn)一個(gè)仿報(bào)紙的多欄結(jié)構(gòu)。
4、多背景圖
CSS3允許背景屬性設(shè)置多個(gè)屬性值，這樣就可以在一個(gè)元素上添加多層背景圖片。
5、塊陰影和文字陰影
盡管box-shadow和text-shadow再CSS2中就已經(jīng)存在，但是它們未被廣泛應(yīng)用，它們將在CSS3中被廣泛采用。塊陰影和文字陰影可以不用圖片就能對(duì)HTML元素添加陰影，增加顯示的立體感增強(qiáng)設(shè)計(jì)的細(xì)節(jié)。塊陰影使用box-shadow屬性，文字陰影使用text-shadow屬性，該屬性目前在Safari和Chorme中可用。
6、圓角
網(wǎng)站建設(shè)CSS3新功能中最常用的一項(xiàng)就是圓角效果，Border-radius無(wú)須背景圖片就能給HTML元素添加圓角。不同于添加JavaScript或多余的HTML標(biāo)簽，僅僅需要添加一些CSS屬性并從好的方面考慮。這個(gè)方案是清晰的和比較有效的，而且可以讓你免于花費(fèi)幾小時(shí)來(lái)尋找精巧的瀏覽器方案和基于JavaScript圓角。
7、邊框圖片
網(wǎng)站建設(shè)中Border-image屬性允許在元素的邊框上設(shè)置圖片，這使得原本單調(diào)的邊框樣式變得很豐富。讓你從通常的solid、dotted和其他邊框樣式中解放出來(lái)。改屬性給設(shè)計(jì)師一個(gè)更好的工具，用它可以方便地定義設(shè)計(jì)元素的邊框樣式，比background-imag屬性或枯燥的默認(rèn)邊框樣式更好用。也可以明確的定義一個(gè)邊框可以被如何縮放或平鋪。
8、形變效果
網(wǎng)站建設(shè)通常使用CSS和HTML我們是不可能使用HTML元素旋轉(zhuǎn)或傾斜一定角度的。為了使元素看起來(lái)更具有立體感，我們不得不把這種效果做成一個(gè)圖片，這樣就限制了很多動(dòng)態(tài)的使用應(yīng)用場(chǎng)景。Transform數(shù)學(xué)的引入使我們以前通常要借助SVG等矢量繪圖手段才能實(shí)現(xiàn)的功能，只需要一個(gè)簡(jiǎn)單的CSS屬性就能實(shí)現(xiàn)。
9、媒體查詢(xún)
媒體查詢(xún)可以讓你為不同設(shè)備基于它們的能力定義不同的樣式。如在可視區(qū)域小于400像素的時(shí)候，想讓網(wǎng)站側(cè)欄顯示在主內(nèi)容的下邊，這樣它就不應(yīng)該浮動(dòng)并顯示在右側(cè)了。
10、CSS3線(xiàn)性漸變
漸變色是網(wǎng)頁(yè)設(shè)計(jì)中很常用的一項(xiàng)元素，它可以增強(qiáng)網(wǎng)頁(yè)元素的立體感，同事使單一顏色的頁(yè)面看起來(lái)不是那么突兀。過(guò)去為了實(shí)現(xiàn)漸變色，通常需要先制作一個(gè)漸變的圖片，將它切割成很細(xì)的一小片，然后使用背景重復(fù)是整個(gè)HTML元素?fù)碛袧u變的背景色。這樣做有兩個(gè)弊端：為了使用圖片背景，很多時(shí)候使得本身簡(jiǎn)單的HTML結(jié)果變得復(fù)雜；另外，受制于背景圖片的長(zhǎng)度火寬度，HTML元素不能靈活的冬天調(diào)整大小。CSS3中Webkit和Mozilla對(duì)漸變都有強(qiáng)大的支持。
成都蜀風(fēng)科技打造與企業(yè)品牌相匹配的網(wǎng)站及微信開(kāi)發(fā)，對(duì)每一個(gè)網(wǎng)站建設(shè)和微信開(kāi)發(fā)項(xiàng)目，都以策略先行，再將創(chuàng)意與技術(shù)完美結(jié)合。 為企業(yè)打造出與企業(yè)品牌氣質(zhì)相匹配的網(wǎng)絡(luò)品牌形象。 我們始終保持行業(yè)領(lǐng)先開(kāi)發(fā)水平，不斷掌握領(lǐng)先的網(wǎng)絡(luò)技術(shù)。
之前我做了個(gè)Django的項(xiàng)目，為了讓管理后臺(tái)更加美觀(guān)，我對(duì)Django（應(yīng)該說(shuō)是SimpleUI的）默認(rèn)的Admin后臺(tái)主頁(yè)進(jìn)行改造，具體可以看這篇文章：項(xiàng)目完成 - 基于Django3.x版本 - 開(kāi)發(fā)部署小結(jié)
之前的兩篇關(guān)于Django3.x開(kāi)發(fā)部署小結(jié)的文章介紹的都是數(shù)據(jù)庫(kù)、接口、性能方面的，看到有朋友留言對(duì)后臺(tái)主頁(yè)的改造表示有興趣，所以就寫(xiě)一篇來(lái)介紹一下~
改造基于我定制的 DjangoStarter 開(kāi)發(fā)模板，本文代碼會(huì)同步提交到Github，項(xiàng)目地址：https://github.com/Deali-Axy/DjangoStarter
DjangoStarter的Admin使用了SimpleUI，這是一個(gè)基于Vue、ElementUI的Admin主題，使用ElementUI的tab組件實(shí)現(xiàn)了多標(biāo)簽的功能，這個(gè)組件本身支持自定義主頁(yè)，所以我的思路就是用Django的Template寫(xiě)個(gè)新的頁(yè)面，配置好路由然后替換掉SimpleUI的默認(rèn)主頁(yè)。
默認(rèn)主頁(yè)長(zhǎng)這樣，有點(diǎn)單調(diào)
改造之后是這樣
嘿，比原來(lái)好一些了，內(nèi)容豐富了~
接下來(lái)我們一步步來(lái)實(shí)現(xiàn)這個(gè)主頁(yè)的改造。
網(wǎng)上有很多后臺(tái)模板，國(guó)產(chǎn)的有ElementUI、AntDesign這些，都挺好用的，但要好看得會(huì)CSS（很遺憾我不太會(huì)）
于是我把目光投向了國(guó)外的開(kāi)源組件，其中AdminLTE就很不錯(cuò)哇，在我最熟悉的Bootstrap基礎(chǔ)上進(jìn)行擴(kuò)展，好看又簡(jiǎn)單易上手~
那么就開(kāi)始吧
這個(gè)頁(yè)面用到的依賴(lài)如下
直接復(fù)制package.json的依賴(lài)部分：
"dependencies": {
"@fortawesome/fontawesome-free": "^6.0.0",
"admin-lte": "3.2",
"bootstrap": "^4.6.1",
"chart.js": "^3.8.0",
"jquery": "^3.6.0",
}
直接復(fù)制保存，然后yarn命令安裝依賴(lài)~
PS：推薦使用yarn管理npm包，當(dāng)然也可以直接用npm
關(guān)于在Django中使用和管理前端資源，具體可以參考這篇文章：Django項(xiàng)目引入NPM和gulp管理前端資源
//使用 npm 下載的前端組件包
const libs=[
{name: "admin-lte", dist: "./node_modules/admin-lte/dist/**/*.*"},
{name: "chart.js", dist: "./node_modules/chart.js/dist/**/*.*"},
{name: "jquery", dist: "./node_modules/jquery/dist/**/*.*"},
{name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
];
// 使用 npm 下載的前端組件，自定義存放位置
const customLibs=[
{name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
]
保存之后在項(xiàng)目根目錄下執(zhí)行gulp move即可~
我們?cè)?/span>templates/admin目錄下新建extend_home.html
具體代碼我就不貼了，已經(jīng)上傳到github上了，可以看這里：https://github.com/Deali-Axy/DjangoStarter/blob/master/templates/admin/extend_home.html
圖表我用的假數(shù)據(jù)做的餅圖，數(shù)據(jù)是這樣的
let exampleData=[
{label: 'a', value: 10},
{label: 'b', value: 10},
{label: 'c', value: 10},
{label: 'd', value: 10},
{label: 'e', value: 10},
{label: 'f', value: 10},
]
新聞和快捷操作的文字用了Django自帶的隨機(jī)文字生成標(biāo)簽
{% lorem 6 w random %}
具體用法可以看官方文檔：https://docs.djangoproject.com/zh-hans/4.0/ref/templates/builtins/#lorem
PS：這個(gè)頁(yè)面里所有內(nèi)容都是假數(shù)據(jù)，實(shí)際使用的時(shí)候可以通過(guò)context傳入數(shù)據(jù)或者請(qǐng)求接口來(lái)填充真實(shí)數(shù)據(jù)~
寫(xiě)完網(wǎng)頁(yè)模板之后保存
接下來(lái)配置一下路由就行
我把這個(gè)頁(yè)面放在DjangoStarter的默認(rèn)App里
編輯apps/core/views.py文件
新增一個(gè)函數(shù)
# 擴(kuò)展admin主頁(yè)，美化后臺(tái)
def extend_admin_home(request):
return render(request, 'admin/extend_home.html')
配置路由
urlpatterns=[
# ...
path('admin_home', views.extend_admin_home),
]
編輯config/settings.py
在SimpleUI配置的區(qū)域里添加這行代碼
SIMPLEUI_HOME_PAGE=f'/{URL_PREFIX}core/admin_home'
PS：因?yàn)镈jangoStarter加了個(gè)URL前綴功能，所以要把URL_PREFIX帶上
這樣就搞定了，具體代碼比較長(zhǎng)，可以看GitHub項(xiàng)目：https://github.com/Deali-Axy/DjangoStarter
不想跟著步驟一步步來(lái)的同學(xué)可以試試我的DjangoStarter模板哈，全都整合好了，開(kāi)箱即用
文章來(lái)自https://www.cnblogs.com/deali/p/16418020.html
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
