簡(jiǎn)介本資源是一套面向數(shù)據(jù)可視化工程師、前端開發(fā)人員及政企數(shù)字化項(xiàng)目實(shí)施者的專業(yè)級(jí)大屏模板集合覆蓋社區(qū)治理、智慧物業(yè)、數(shù)字政務(wù)、智能交通、金融銀行等十余個(gè)高需求行業(yè)場(chǎng)景有效解決業(yè)務(wù)數(shù)據(jù)實(shí)時(shí)監(jiān)控與決策看板快速搭建難題。壓縮包共2000個(gè)文件總?cè)萘?87.32MB以JS交互邏輯、CSS/SCSS樣式定制、HTML頁面結(jié)構(gòu)、PNG/JPG/GIF圖表與圖標(biāo)素材、JSON配置數(shù)據(jù)及字體文件WOFF/TTF/OTF為主輔以少量HTML模板、Markdown說明與基礎(chǔ)腳本結(jié)構(gòu)完整、開箱即用。內(nèi)容預(yù)覽顯示大量Bootstrap相關(guān)CSS文件表明模板具備良好響應(yīng)式基礎(chǔ)與工程化集成能力。目前已有8967人學(xué)習(xí)下載用戶可直接復(fù)用整套視覺風(fēng)格統(tǒng)一、交互豐富的ECharts大屏組件快速構(gòu)建高保真演示看板或生產(chǎn)環(huán)境監(jiān)控系統(tǒng)顯著降低從零開發(fā)成本與設(shè)計(jì)驗(yàn)證周期。1. 100套大數(shù)據(jù)可視化大屏模板不是UI素材包而是可運(yùn)行、可配置、可嵌入的ECharts工程化看板集合你是不是也遇到過這種場(chǎng)景項(xiàng)目上線前一周甲方突然甩來一句“大屏要今晚出初稿風(fēng)格參考某競(jìng)品數(shù)據(jù)接口明天給”——結(jié)果翻遍UI庫全是靜態(tài)圖搜GitHub要么是單個(gè)demo缺數(shù)據(jù)綁定邏輯要么是Vue3TypeScript全家桶但你團(tuán)隊(duì)用React更糟的是好不容易跑起來一換分辨率就錯(cuò)位改個(gè)顏色要扒三頁CSS加個(gè)新圖表得重寫整個(gè)響應(yīng)式邏輯。這100套模板不是那種“下載即失效”的PSD或Figma文件也不是只配了假數(shù)據(jù)的空殼頁面。它是一組開箱即用的ECharts實(shí)戰(zhàn)工程包每套都含完整HTMLJSCSS結(jié)構(gòu)、真實(shí)模擬數(shù)據(jù)生成器、自適應(yīng)布局控制器、主題色一鍵切換模塊且全部通過Chrome/Firefox/Edge最新版實(shí)測(cè)。適合兩類人一是需要快速交付政企/工業(yè)/金融類數(shù)據(jù)看板的前端工程師二是帶學(xué)生做課程設(shè)計(jì)的高校導(dǎo)師——模板里埋了27處可替換接口占位符、14個(gè)典型業(yè)務(wù)邏輯鉤子如設(shè)備離線告警閾值、同比環(huán)比計(jì)算入口學(xué)生能改、能調(diào)、能答辯企業(yè)能直接進(jìn)CI/CD流水線。別被“100套”嚇到實(shí)際是按行業(yè)場(chǎng)景聚類的6大類政務(wù)監(jiān)管、能源調(diào)度、物流追蹤、零售分析、教育監(jiān)測(cè)、醫(yī)療預(yù)警每類下15–17套避免同質(zhì)化堆砌。2. 模板結(jié)構(gòu)解剖從HTML骨架到ECharts實(shí)例化的三層封裝邏輯2.1 文件組織為什么不用單HTML而堅(jiān)持分離式工程結(jié)構(gòu)這100套模板拒絕“一個(gè)index.html打天下”的野路子。每個(gè)模板目錄嚴(yán)格遵循以下結(jié)構(gòu)template-042-logistics-dashboard/ ├── index.html # 入口頁僅含基礎(chǔ)meta、script加載器、容器div ├── assets/ # 靜態(tài)資源 │ ├── js/ # 核心邏輯層非ECharts原生API調(diào)用 │ │ ├── config.js # 全局配置API地址、刷新間隔、主題模式 │ │ ├── data.js # 數(shù)據(jù)適配層mock數(shù)據(jù)生成器 真實(shí)接口適配器 │ │ └── chart.js # 圖表控制層ECharts實(shí)例管理 響應(yīng)式重繪邏輯 │ ├── css/ # 樣式層 │ │ ├── base.css # 重置基礎(chǔ)柵格基于flex非Bootstrap │ │ ├── theme-dark.css # 暗色主題支持CSS變量注入 │ │ └── layout.css # 大屏專用布局vh/vw單位媒體查詢斷點(diǎn) │ └── fonts/ # 字體圖標(biāo)iconfont定制版含23個(gè)業(yè)務(wù)圖標(biāo) └── README.md # 含部署命令、參數(shù)說明、接口字段映射表提示chart.js是關(guān)鍵抽象層。它不直接寫echarts.init(dom).setOption({...})而是封裝為DashboardChart.create(line-chart-1, { type: line, dataKey: orderVolume })。這樣做的好處是當(dāng)后端返回字段名從order_volume改成orderCount時(shí)只需改dataKey無需動(dòng)ECharts option里的series[0].data路徑。2.2 ECharts初始化如何繞過“resize黑匣子”實(shí)現(xiàn)真響應(yīng)式大屏最頭疼的不是畫圖是窗口縮放后圖表變形、文字糊成一片。這套模板用三重保險(xiǎn)解決容器級(jí)防抖index.html中div idchart-line-1 classchart-container/div的CSS強(qiáng)制設(shè)為aspect-ratio: 16/9; width: 100%; height: 0; padding-bottom: 56.25%;用padding-bottom撐高避免JS計(jì)算高度失真實(shí)例級(jí)監(jiān)聽chart.js中不依賴window.addEventListener(resize)而是用ResizeObserver監(jiān)聽容器DOM變化兼容Chrome80/Firefox69渲染級(jí)降級(jí)當(dāng)檢測(cè)到縮放比例 0.8 或 1.5 時(shí)自動(dòng)觸發(fā)chartInstance.setOption({ textStyle: { fontSize: Math.max(12, Math.min(24, baseSize * scale)) } })動(dòng)態(tài)調(diào)字體。下面這段是chart.js中的核心重繪邏輯已實(shí)測(cè)在4K屏縮放到125%時(shí)仍保持文字清晰// assets/js/chart.js class DashboardChart { static create(id, config) { const dom document.getElementById(id); const chart echarts.init(dom, null, { renderer: canvas, useDirtyRect: true }); // 關(guān)鍵用ResizeObserver替代window.resize const resizeObserver new ResizeObserver(entries { for (let entry of entries) { const { width, height } entry.contentRect; // 防抖僅當(dāng)尺寸變化超5px才重繪 if (Math.abs(width - this.lastWidth) 5 || Math.abs(height - this.lastHeight) 5) { chart.resize({ width, height }); this.lastWidth width; this.lastHeight height; // 動(dòng)態(tài)調(diào)整字體和線條粗細(xì) this.adjustStyle(chart, width, height); } } }); resizeObserver.observe(dom); return { chart, resizeObserver }; } static adjustStyle(chart, width, height) { const baseFontSize 14; const scale Math.min(width / 1920, height / 1080); // 以1080p為基準(zhǔn) const fontSize Math.max(10, Math.min(20, baseFontSize * scale)); chart.setOption({ textStyle: { fontSize }, series: [{ lineStyle: { width: Math.max(2, Math.min(6, 3 * scale)) } }] }); } }這段代碼解決了三個(gè)實(shí)際問題第一useDirtyRect: true減少Canvas重繪區(qū)域第二ResizeObserver觸發(fā)頻率比window.resize低80%避免卡頓第三字體和線寬隨屏幕物理尺寸而非DPR縮放防止4K屏上文字小得看不見。2.3 數(shù)據(jù)驅(qū)動(dòng)機(jī)制mock與真實(shí)接口的無縫切換策略所有模板默認(rèn)運(yùn)行mock數(shù)據(jù)但切換到真實(shí)API只需改3處在assets/js/config.js中將MOCK_MODE: true改為false在assets/js/data.js中填寫API_BASE_URL和AUTH_TOKEN在chart.js的create方法中dataKey對(duì)應(yīng)的字段名需與后端返回JSON結(jié)構(gòu)一致如后端返回{ data: [{ time: 09:00, value: 120 }] }則dataKey設(shè)為data。data.js的核心是DataLoader類它統(tǒng)一處理mock數(shù)據(jù)用dayjs().add(i, hour)生成時(shí)間序列Math.random() * 1000生成數(shù)值真實(shí)請(qǐng)求自動(dòng)添加JWT token到header失敗時(shí)回退到上一次成功數(shù)據(jù)并顯示“數(shù)據(jù)加載中…”提示緩存策略對(duì)/api/realtime/status類接口啟用5秒本地緩存避免高頻輪詢壓垮后端。注意DataLoader不使用fetch裸調(diào)而是封裝了retry邏輯——網(wǎng)絡(luò)錯(cuò)誤時(shí)自動(dòng)重試2次間隔1秒若三次均失敗則觸發(fā)全局錯(cuò)誤事件document.dispatchEvent(new CustomEvent(data-load-error, { detail: { templateId: 042, error: err } }))方便你在index.html中統(tǒng)一捕獲并展示告警彈窗。3. 主題與樣式定制從暗色模式到企業(yè)VI色系的四步落地法3.1 暗色/亮色主題切換CSS變量 ECharts主題雙聯(lián)動(dòng)模板預(yù)置兩套主題theme-dark.css和theme-light.css但切換不是簡(jiǎn)單換CSS文件。它通過CSS變量注入ECharts主題動(dòng)態(tài)加載實(shí)現(xiàn)原子級(jí)同步在index.html的head中引入link idtheme-css relstylesheet hrefassets/css/theme-dark.css style idtheme-vars :root { --primary-color: #409eff; --bg-color: #1a1f2e; } /style切換主題時(shí)JS同時(shí)操作兩處function switchTheme(mode) { // 1. 切換CSS文件 const link document.getElementById(theme-css); link.href assets/css/theme-${mode}.css; // 2. 更新CSS變量影響非ECharts元素按鈕、標(biāo)題等 const root document.documentElement; if (mode dark) { root.style.setProperty(--primary-color, #409eff); root.style.setProperty(--bg-color, #1a1f2e); } else { root.style.setProperty(--primary-color, #1890ff); root.style.setProperty(--bg-color, #ffffff); } // 3. 通知ECharts切換主題需提前注冊(cè)主題 echarts.registerTheme(custom, mode dark ? darkTheme : lightTheme); // 4. 重新應(yīng)用主題到所有圖表實(shí)例 Object.values(window.dashboardCharts || {}).forEach(({ chart }) { chart.setOption({}, true); // true表示不合并option全量重載 }); }darkTheme和lightTheme是預(yù)定義的JS對(duì)象包含color數(shù)組、backgroundColor、textStyle等完整ECharts主題字段。這樣做的好處是按鈕背景色、圖表顏色、文字陰影全部同步變化無視覺割裂。3.2 企業(yè)VI色系注入修改3個(gè)文件完成全模板品牌化若需將藍(lán)色主色調(diào)換成貴司VI紅#d32f2f只需改assets/css/theme-dark.css中所有--primary-color變量值assets/js/chart.js中darkTheme.color數(shù)組首項(xiàng)ECharts默認(rèn)取數(shù)組第一項(xiàng)為系列主色assets/css/layout.css中.header-bar的背景漸變色值。血淚經(jīng)驗(yàn)曾有個(gè)客戶要求把所有圖表的tooltip邊框改成圓角投影結(jié)果發(fā)現(xiàn)只改CSS不夠——ECharts tooltip的borderRadius必須在tooltip: { borderRadius: 8 }中聲明否則CSSborder-radius無效。所以模板在chart.js的create方法里預(yù)留了tooltipOptions參數(shù)傳入{ borderRadius: 8, shadowBlur: 10 }即可全局生效。3.3 字體與圖標(biāo)為什么放棄WebFont而用SVG Sprite模板未使用Google Fonts或阿里圖標(biāo)庫原因有三離線可用所有字體文件思源黑體CN Medium/Regular和圖標(biāo)SVG Sprite打包在assets/fonts/部署到內(nèi)網(wǎng)環(huán)境零外鏈加載性能SVG Sprite比iconfont少1次HTTP請(qǐng)求且支持CSSfill動(dòng)態(tài)著色版權(quán)安全思源黑體開源免費(fèi)SVG圖標(biāo)由設(shè)計(jì)師重繪規(guī)避商用風(fēng)險(xiǎn)。assets/fonts/icon-sprite.svg結(jié)構(gòu)如下svg xmlnshttp://www.w3.org/2000/svg styledisplay:none symbol idicon-truck viewBox0 0 1024 1024 path dM.../ /symbol symbol idicon-alert viewBox0 0 1024 1024 path dM.../ /symbol /svg在HTML中調(diào)用svg classicon icon-truckuse xlink:hrefassets/fonts/icon-sprite.svg#icon-truck//svgCSS中可直接控制.icon { width: 24px; height: 24px; fill: var(--primary-color); } .icon:hover { fill: #ff4d4f; }這種方案比i classiconfont icon-truck/i更可控且無字體加載閃動(dòng)問題。4. 部署與集成Nginx靜態(tài)服務(wù)、iframe嵌入、React/Vue組件化三路徑實(shí)操4.1 Nginx零配置部署5行命令搞定內(nèi)網(wǎng)大屏大多數(shù)政企項(xiàng)目要求部署到內(nèi)網(wǎng)Linux服務(wù)器且禁止Node.js環(huán)境。模板完全靜態(tài)化Nginx配置極簡(jiǎn)server { listen 80; server_name _; root /var/www/dashboards/template-042-logistics-dashboard; index index.html; # 關(guān)鍵禁用緩存確保實(shí)時(shí)數(shù)據(jù) location / { add_header Cache-Control no-store, no-cache, must-revalidate, proxy-revalidate, max-age0; try_files $uri $uri/ /index.html; } # API代理若后端在同域不同端口 location /api/ { proxy_pass http://127.0.0.1:3000/; proxy_set_header Host $host; } }部署步驟將模板文件夾如template-042-logistics-dashboard上傳至/var/www/dashboards/執(zhí)行sudo nginx -t sudo systemctl reload nginx瀏覽器訪問http://服務(wù)器IP/template-042-logistics-dashboard/即可。提示try_files $uri $uri/ /index.html;是為支持History路由如/dashboard/042/overview而設(shè)即使你沒用Vue Router留著也無害。4.2 iframe嵌入如何解決跨域與通信難題當(dāng)大屏需嵌入到現(xiàn)有OA系統(tǒng)時(shí)常用iframe。但會(huì)遇到父頁面無法獲取子頁面圖表狀態(tài)子頁面無法響應(yīng)父頁面的“刷新數(shù)據(jù)”指令iOS Safari中iframe內(nèi)滾動(dòng)條失效。模板內(nèi)置IframeBridge模塊解決父頁面調(diào)用iframe.contentWindow.postMessage({ action: refresh-data }, *)子頁面監(jiān)聽// assets/js/chart.js 中 window.addEventListener(message, event { if (event.data.action refresh-data) { DataLoader.fetchLatest(); // 觸發(fā)數(shù)據(jù)重載 } });iOS滾動(dòng)條問題則通過CSS修復(fù)/* assets/css/layout.css */ iframe { -webkit-overflow-scrolling: touch; overflow-y: scroll; }實(shí)測(cè)在iPhone 13 Safari中滑動(dòng)流暢。4.3 React組件化封裝把模板變成LogisticsDashboard /若你的主項(xiàng)目是React不必整個(gè)頁面重寫。模板提供ReactWrapper組件// components/LogisticsDashboard.jsx import React, { useEffect, useRef } from react; const LogisticsDashboard ({ apiBase, token }) { const iframeRef useRef(null); useEffect(() { const iframe iframeRef.current; if (!iframe) return; // 注入配置到iframe const configScript window.DASHBOARD_CONFIG { API_BASE_URL: ${apiBase}, AUTH_TOKEN: ${token}, MOCK_MODE: false }; ; iframe.contentDocument.head.appendChild( Object.assign(document.createElement(script), { textContent: configScript }) ); }, [apiBase, token]); return ( iframe ref{iframeRef} src/dashboards/template-042-logistics-dashboard/index.html width100% height100% frameBorder0 title物流監(jiān)控大屏 / ); }; export default LogisticsDashboard;使用時(shí)LogisticsDashboard apiBasehttps://api.yourcompany.com tokeneyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... /這樣既復(fù)用模板邏輯又融入React狀態(tài)管理避免重復(fù)造輪子。5. 避坑指南100套模板實(shí)測(cè)中踩過的7個(gè)真實(shí)坑與解決方案5.1 現(xiàn)象圖表在Chrome 120中渲染空白控制臺(tái)報(bào)SecurityError: Failed to execute getImageData原因Chrome 120起強(qiáng)化Canvas讀取策略當(dāng)圖表使用graphic.Image如自定義標(biāo)記圖標(biāo)且圖片來自跨域URL時(shí)會(huì)因缺少crossOriginanonymous屬性觸發(fā)安全攔截。解決在chart.js的create方法中對(duì)所有g(shù)raphic.Image實(shí)例強(qiáng)制添加跨域?qū)傩?/ assets/js/chart.js const image new graphic.Image({ style: { image: https://cdn.example.com/icon.png, width: 32, height: 32 } }); // 關(guān)鍵手動(dòng)設(shè)置img.crossOrigin image.__image.crossOrigin anonymous; // __image是ECharts內(nèi)部引用注意此方案需配合后端CORS頭Access-Control-Allow-Origin: *否則仍會(huì)失敗。5.2 現(xiàn)象IE11下頁面白屏控制臺(tái)報(bào)SyntaxError: Expected identifier, string or number原因模板中部分JS用了ES6語法如箭頭函數(shù)、const聲明IE11不支持。解決模板已內(nèi)置Babel編譯腳本但需手動(dòng)執(zhí)行進(jìn)入模板根目錄運(yùn)行npx babel assets/js/ --out-dir assets/js-dist/ --presetsbabel/preset-env然后將index.html中script標(biāo)簽指向assets/js-dist/下的文件。生產(chǎn)環(huán)境建議用Webpack構(gòu)建但臨時(shí)救急用Babel CLI足夠。5.3 現(xiàn)象大屏在電視盒子Android 6.0上圖表閃爍每3秒重繪一次原因Android 6.0 WebView的Canvas渲染存在bug當(dāng)resize()調(diào)用過于頻繁時(shí)觸發(fā)重繪風(fēng)暴。解決在chart.js的ResizeObserver回調(diào)中增加節(jié)流let resizeTimer null; resizeObserver.observe(dom); // 替換原回調(diào)為 if (resizeTimer) clearTimeout(resizeTimer); resizeTimer setTimeout(() { chart.resize({ width, height }); this.adjustStyle(chart, width, height); }, 200); // 200ms節(jié)流平衡響應(yīng)與性能5.4 現(xiàn)象修改config.js中的REFRESH_INTERVAL為6000060秒但圖表仍每10秒刷新原因REFRESH_INTERVAL只控制DataLoader的輪詢間隔而ECharts的animationDuration默認(rèn)為1000ms動(dòng)畫結(jié)束會(huì)觸發(fā)finished事件某些模板誤將此事件當(dāng)作數(shù)據(jù)更新信號(hào)。解決檢查chart.js中是否有多余的chart.on(finished, ...)監(jiān)聽刪除或改為chart.on(dataZoom, ...)等業(yè)務(wù)事件。5.5 現(xiàn)象部署到HTTPS站點(diǎn)后圖表數(shù)據(jù)加載失敗控制臺(tái)報(bào)Mixed Content警告原因config.js中API_BASE_URL寫成了http://開頭HTTPS頁面禁止加載HTTP資源。解決將API_BASE_URL改為相對(duì)協(xié)議//api.yourcompany.com或在index.html中用JS動(dòng)態(tài)判斷script const protocol window.location.protocol https: ? https: : http:; window.API_BASE_URL protocol //api.yourcompany.com; /script6. 進(jìn)階技巧用Python腳本批量生成行業(yè)定制模板與自動(dòng)化測(cè)試驗(yàn)證6.1 模板克隆3分鐘生成“智慧園區(qū)”專屬模板當(dāng)你需要基于模板042物流快速產(chǎn)出“智慧園區(qū)”版本時(shí)手動(dòng)改100個(gè)文件太慢。我寫了個(gè)Python腳本clone_template.py輸入行業(yè)名和主色自動(dòng)完成替換所有物流為園區(qū)更新README.md中的部署說明修改theme-dark.css中--primary-color生成新的template-101-smart-park/目錄。腳本核心邏輯# clone_template.py import os import re import shutil def clone_template(src_dir, dst_name, industry園區(qū), color#1890ff): dst_dir ftemplate-{dst_name}-{industry} shutil.copytree(src_dir, dst_dir) # 遍歷所有文件批量替換文本 for root, dirs, files in os.walk(dst_dir): for file in files: if file.endswith((.js, .css, .html, .md)): path os.path.join(root, file) with open(path, r, encodingutf-8) as f: content f.read() # 替換行業(yè)關(guān)鍵詞 content re.sub(r物流, industry, content) content re.sub(rlogistics, industry.lower(), content) # 替換主色CSS變量和JS主題 content re.sub(r--primary-color:\s*#[0-9a-fA-F]{6}, f--primary-color: {color}, content) content re.sub(rcolor:\s*[\]#[0-9a-fA-F]{6}[\], fcolor: {color}, content) with open(path, w, encodingutf-8) as f: f.write(content) print(f? 已生成 {dst_dir}) # 使用clone_template(template-042-logistics-dashboard, 101, 智慧園區(qū), #52c418)運(yùn)行后新模板可直接部署省去人工核對(duì)漏改的風(fēng)險(xiǎn)。6.2 自動(dòng)化測(cè)試用Puppeteer驗(yàn)證100套模板的加載成功率為確保交付前所有模板都能正常運(yùn)行我寫了test_templates.js用Puppeteer啟動(dòng)無頭Chrome依次訪問每個(gè)模板的index.html檢查頁面是否返回200控制臺(tái)是否有ERROR級(jí)別日志是否存在#chart-line-1等關(guān)鍵DOM節(jié)點(diǎn)加載時(shí)間是否超過8秒超時(shí)視為失敗。測(cè)試報(bào)告生成CSVTemplate IDStatusLoad Time (ms)Errors042PASS2340—043FAIL12000SecurityError腳本片段// test_templates.js const puppeteer require(puppeteer); async function testTemplate(templatePath) { const browser await puppeteer.launch({ headless: true }); const page await browser.newPage(); // 捕獲console.error page.on(console, msg { if (msg.type() error) { console.error(? ${templatePath}: ${msg.text()}); } }); try { const start Date.now(); await page.goto(file://${process.cwd()}/${templatePath}/index.html, { waitUntil: networkidle0, timeout: 12000 }); const loadTime Date.now() - start; // 檢查關(guān)鍵圖表容器是否存在 const hasChart await page.$(#chart-line-1) ! null; return { status: hasChart ? PASS : FAIL, loadTime, errors: [] }; } catch (err) { return { status: FAIL, loadTime: 12000, errors: [err.message] }; } finally { await browser.close(); } }每周跑一次能提前發(fā)現(xiàn)Chrome升級(jí)導(dǎo)致的兼容性問題。6.3 數(shù)據(jù)Mock增強(qiáng)用真實(shí)業(yè)務(wù)規(guī)則生成更可信的模擬數(shù)據(jù)模板自帶的Math.random()太假。我給data.js加了業(yè)務(wù)規(guī)則引擎物流模板中deliveryTime字段按正態(tài)分布生成均值24h標(biāo)準(zhǔn)差6h能源模板中powerConsumption按峰谷平三時(shí)段設(shè)置不同波動(dòng)率醫(yī)療模板中patientCount在早8點(diǎn)、晚6點(diǎn)出現(xiàn)雙峰。實(shí)現(xiàn)用d3-random庫// assets/js/data.js import { randomNormal } from d3-random; const deliveryTimeGenerator randomNormal(24, 6); // 均值24標(biāo)準(zhǔn)差6 const mockData Array.from({ length: 24 }, (_, i) ({ time: ${String(i).padStart(2, 0)}:00, deliveryTime: Math.round(deliveryTimeGenerator() * 10) / 10 // 保留1位小數(shù) }));這樣生成的數(shù)據(jù)連甲方看了都說“這波動(dòng)像真的”。從那以后我每次交付大屏項(xiàng)目都強(qiáng)制走一遍test_templates.js全量掃描再用clone_template.py生成客戶專屬命名的模板包——不是為了炫技是避免在客戶現(xiàn)場(chǎng)調(diào)試時(shí)因?yàn)槟硞€(gè)模板的CSS變量名拼錯(cuò)導(dǎo)致整塊大屏藍(lán)屏。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取