HTML模板中引入组件库需使用完整HTTPS路径,Bootstrap5需加载bundle版本,图标库需单独引入。CI流水线可用HTMLHint静态扫描组件使用合规性,需配置attr-lowercase等规则。组件复用应加命名空间避免样式冲突,后端渲染时JS需通过th:attr注入数据,CSS作用域、JS生命周期和数据流向是集成关键。
和标签,但顺序和完整性必须严格把控。Bootstrap 5的bootstrap.bundle.min.js必须加载,仅引用bootstrap.min.js会导致data-bs-toggle类失效,因为Popper未被包含。
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css,避免使用./css/bootstrap.css;服务端渲染时相对路径可能拼错路由。,Bootstrap自带的图标已移除,遗漏会导致显示方块。却无响应,需确认是否同时引入了Vue 2.7和Element UI的UMD版本:https://unpkg.com/vue@2.7.16/dist/vue.min.js + https://unpkg.com/element-ui/lib/index.js。theme-chalk样式表必须在Bootstrap之后加载,否则按钮圆角、边框会被覆盖。缺少v-loading属性、未配置model等低级但高频的错误。
package.json中添加脚本:"lint:html": "htmlhint src/**/*.html --config .htmlhintrc",配置项中必须启用attr-lowercase和attr-no-unknown,否则自定义组件标签(如el-card)会被视为非法属性报错。vite.config.js的build.beforeWriteBundle钩子中调用execSync('npx htmlhint'),失败直接中断构建。src/pages/**/*.{html,htm},否则templates/下的Thymeleaf模板不会被扫描。.btn这样的泛化名称等于主动邀请样式冲突。即使只集成一个组件库,也需强制添加命名空间,例如.c-button或.el-button。
el-button),但若手写,会与Bootstrap的.btn产生冲突,最终渲染结果取决于CSS加载顺序。...到任意页面应能直接运行,不能依赖外部或全局reset。!important和px单位:组件内所有间距应使用var(--c-space-md),否则更换主题或适配高DPR屏幕时会失真。col-md-6和c-grid-col-6,栅格系统会错位——语义规则一旦断裂,响应式就不可控。src/main/resources/templates目录下存放Thymeleaf模板,组件JS不能直接写在中,需通过th:inline="javascript"或后端变量透出。
[[${'...'}]]中,否则Thymeleaf会把{{ }}当作模板语法解析并删除。el-table数据源不能硬编码,需从后端Model注入:th:attr="data-list=${userList}",前端再用JSON.parse(this.dataset.list)读取。/static/js/vue.min.js),Thymeleaf不处理相对路径中的../。window.postMessage,且子页需显式监听message事件。class="btn"编写单元测试,但它恰恰是CI失败最常卡住的位置。
侠游戏发布此文仅为了传递信息,不代表侠游戏网站认同其观点或证实其描述