npm
# 安装的时候可能会遇到一个源没有的情况, 然后就换另一个源使用.
npm config set registry https://registry.npmmirror.com
npm config set registry https://mirrors.cloud.tencent.com/npm
npm config set registry https://mirrors.huaweicloud.com/repository/npm
npm config get registry
npm config delete registry
# 清理缓存, 可以解决一些安装问题
npm cache clean --force
# 显示详细日志定位安装问题
npm install --verbose
# 运行
npm run
npm run serve
npm run dev
# Error: Cannot find module '@nodelib/fs.stat'
# If you miss some package, reinstall it.
npm install @nodelib/fs.stat
npm install vue-template-compiler --save-dev
alpinejs
https://alpinejs.dev/start-here https://tailkits.com/components/pines-alpine-ui-library/
使用x-html直接渲染data里面的HTML代码
<template x-for="item in data">
<div x-html="marked.parse(item)"></div>
</template>reference
https://www.cnblogs.com/deali/p/18561643
tempus-dominus
时间选择控件
官方说明
https://getdatepicker.com/ https://getdatepicker.com/6/locale.html
<!-- Popperjs -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<!-- Tempus Dominus JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
<!-- Tempus Dominus Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/css/tempus-dominus.min.css" crossorigin="anonymous">使用示例
<!-- tempus-dominus -->
<asset:stylesheet src="tempus-dominus/tempus-dominus.6.9.4.css"/>
<div class="col-sm-3">
<div class="form-group">
<label>担保责任解除日期</label>
<div class="input-group date" id="guaranteeDutyEndDate"
data-target-input="nearest">
<input type="text" title="guaranteeDutyEndDate"
name="guaranteeDutyEndDate"
class="form-control datetimepicker-input"
data-target="#guaranteeDutyEndDate"/>
<div class="input-group-append" data-target="#guaranteeDutyEndDate"
data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
tempusDominus.loadLocale(tempusDominus.locales.ch);
tempusDominus.locale(tempusDominus.locales.ch.name);
const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),
{
display: {
inline: false,
}
}
);
</script>
自定义配置，用于匹配中文
/*!
* Tempus Dominus v6.9.4 (https://getdatepicker.com/) * Copyright 2013-2023 Jonathan Peterson * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE) */(function (g, f) { typeof exports === 'object' && typeof module !== 'undefined' ? f(exports) : typeof define === 'function' && define.amd ? define(['exports'], f) : (g = typeof globalThis !== 'undefined' ? globalThis : g || self, f((g.tempusDominus = g.tempusDominus || {}, g.tempusDominus.locales = g.tempusDominus.locales || {}, g.tempusDominus.locales.ch = {}))); })(this, (function (exports) {
'use strict'; const name = 'ch';
const localization = {
today: '转到今天',
clear: '清除选中',
close: '关闭选择器',
selectMonth: '选择月份',
previousMonth: '上一月',
nextMonth: '下一月',
selectYear: '选择年份',
previousYear: '前一年',
nextYear: '后一年',
selectDecade: '选择十年',
previousDecade: '前一个十年',
nextDecade: '下一个十年',
previousCentury: '前一个世纪',
nextCentury: '下一个世纪',
pickHour: '选择小时',
incrementHour: '增加小时',
decrementHour: '减少小时',
pickMinute: '选择分钟',
incrementMinute: '增加分钟',
decrementMinute: '减少分钟',
pickSecond: '选择秒',
incrementSecond: '增加秒',
decrementSecond: '减少秒',
toggleMeridiem: '切换上午/下午',
selectTime: '选择时间',
selectDate: '选择日期',
dayViewHeaderFormat: { month: 'long', year: '2-digit' },
locale: 'ch',
startOfTheWeek: 1,
dateFormats: {
LT: 'H:mm',
LTS: 'H:mm:ss',
L: 'yyyy-MM-dd',
LL: 'd MMMM yyyy г.',
LLL: 'd MMMM yyyy г., H:mm',
LLLL: 'dddd, d MMMM yyyy г., H:mm',
},
ordinal: (n) => n,
format: 'L',
}; exports.localization = localization; exports.name = name; Object.defineProperty(exports, '__esModule', { value: true });
}));前端低代码设计器
https://github.com/baidu/amis/releases https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started
jQuery
xhr(XMLHttpRequest)
<script>
$(document).ready(function() {
// 拦截测试按钮点击
$('#testBtn').on('click', function(e) {
e.preventDefault();
// 发起AJAX请求
$.ajax({
url: "/component/test/" +${this.component?.id},
type: 'GET',
success: function(response) {
// 格式化JSON响应
console.log("111")
const formatted = JSON.stringify(response, null, 4);
$('#testResultContent').html(formatted);
},
error: function(xhr) {
console.log(xhr)
$('#testResultContent').html(xhr.statusText);
}
});
});
});
</script>选定页面元素
document.querySelector('textarea[name=\"message\"]')WebSocket
https://www.cnblogs.com/goloving/p/10746378.html
this.stompClient = null;
// 初始化WebSocket连接
function initWebSocket() {
// 确保只建立一个连接
if (stompClient && stompClient.connected) return;
// 使用StompJs.Client构造函数初始化
stompClient = new StompJs.Client({
brokerURL: "ws${createLink(uri: '/stomp', absolute: true).replaceFirst('(?i)http', '')}",
onConnect: () => {
console.log('STOMP连接成功');
// 订阅消息主题
stompClient.subscribe('/topic/hello', (response) => {
try {
// 尝试解析 JSON 格式（兼容未来可能的 JSON 响应）
const message = JSON.parse(response.body);
addMessageToChat({ content: message.content }, false);
} catch (e) {
// 解析失败时直接将响应体作为文本内容处理
addMessageToChat({ content: response.body }, false);
}
});
},
onStompError: (frame) => {
console.error('STOMP错误: ' + frame.headers['message']);
},
reconnectDelay: 3000 // 自动重连延迟(毫秒)
});
// 激活客户端连接
stompClient.activate();
};
console.log(this.stompClient);