目标
将对象的所有 key 配置给 watch
代码
const ImageableFields = [
'cover',
'detail',
'reply',
];
// 转换为 FormItem.prop: cover -> form._images_cover
const WatchableFields = ImageableFields.ma(v => `form._images_${v}`);
export default {
props: {
detail: {
type: Object,
default: () => ({}),
},
},
data() {...
分类为 Vue.js 的文章：
可以不使用 vite-plugin-mock 只引入 mockjs，但是只使用 mockjs 的话配置会繁琐；vite-plugin-mock 做了将 mockjs 集成到 vite 的工作。
package.json
yarn add -D mockjs vite-plugin-mock
.env
VITE_MOCK_ENABLED=true
vite.config.js
import { loadEnv, defineConfig } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';
export default ({ mode }) => {
const ENV ...
用法
let status = true;
v-loading="status"
JS
const toggleLoading = (el, binding) => {
if (binding.value) {
let dom = `
<div class="el-loading-mask">
<div class="el-loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50&qu...
官方文档在这里：https://vitejs.dev/config/
让 Vue 认出 html 原生的 marquee 标签
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default () => {
return defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => ['marquee'].includes(ta...
概要
yarn build 后自动生成并在 finder 中高亮 .tgz 压缩包，压缩包名含项目名称、生成日期、git commit id，并提示是否将生成的 dist 和 .tgz 删除。
压缩包名格式：《某可视化大屏_production_20230326214235_52905e7.tgz》
依赖：macOS，fish shell
用法
yb # 仅 yarn build，NODE_ENV=production
yb production # 仅 yarn build，NODE_ENV=production
yb development ...
提示：windows 平台需要在 git bash 中执行以下操作。
生成自动登录 ssh 的 key，这个 key 可以代替 ssh 密码，后边再使用 scp 复制文件时就不需要输入密码这步交互操作了
ssh-keygen
# 不需要输入信息，一路回车即可
将 ssh key 添加到服务器上
ssh-copy-id -i ~/.ssh/id_rsa.pub -p 22 root@106.13.232.33
# 按提示输入 admin 的密码
本地配置 ssh 主机（用“vueProjectHost”代替“root@106.13.232.33”）
# ~/.ssh/...
引入 mxGraph
旧方法
yarn add mxgraph-js # 这个包里的 mxgraph 版本号为 3.6.0
import {
mxGraph,
mxUtils,
mxHierarchicalLayout,
mxCellOverlay,
mxEvent,
mxRubberband,
mxKeyHandler,
mxConstants,
mxImage,
} from 'mxgraph-js';
官方用法
yarn add mxgraph # mxgraph 版本号 4.2.2
import * as mxgraph from 'mxgraph';
const {
mxGraph,
mxUtils,
m...
用法
this.$dialog.show({
title: "Dialog",
width: "50%",
data: { name: "name", age: 18 }, // 非编辑时此项可省略
option: {
confirmText: "保存", // 可省
columns: [
{
label: "姓名",
prop: "name",
rules: [
{
required: true,
message: &quo...
import { fileURLToPath, URL } from 'node:url';
import copy from 'rollup-plugin-copy';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';
// https://vitejs.dev/config/
export default defineConfig({
// server: {
// proxy: {
// '/my-report/ass...
{
type: 'module', // module / commonjs
}
type 字段的产生用于定义 package.json 文件和该文件所在目录根目录中 .js 文件和无拓展名文件的处理方式。值为 moduel 则当作 ES6 模块处理；值为 commonjs 则被当作 commonJs 模块处理，无 type 则为认为是 CommonJS
.mjs 后缀名的文件总是被当作 ES6 模块，.cjs 后缀名的文件总是被当成 CommonJS 模块
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
waterMarkConfig: {
width: 340,
height: 240,
content: '这里是水印内容，可以是 git commit id 或 process.env.NODE_ENV',
font: '14px PingFang SC, sans-serif',
...
不推荐使用本文的方法，建议使用 props 和 emit
方法来自：stackoverflow.com/questions/55316490，在用这个方法前可以先试试 this.$refs[‘子组件’].doSth()，比下文的方法简单。
子组件
export default {
methods: {
doSth() {
console.log('子组件的 doSth 方法');
},
},
mounted() {
let self = this;
self.$emit('callback', {
doSth: () =&...
