1 config

js
https://www.npmjs.com/package/config




支持yml格式，需要下载 npm install js-yaml -S
$ npm install config
$ mkdir config
$ vi config/default.json


{
  // Customer module configs
  "Customer": {
    "dbConfig": {
      "host": "localhost",
      "port": 5984,
      "dbName": "customers"
    },
    "credit": {
      "initialLimit": 100,
      // Set low for development
      "initialDays": 1
    }
  }
}

//使用
cross-env指定配置环境
npm install cross-env --save 
const config = require('config');
package.json 中配置
"scripts": {
    "prod": "cross-env NODE_ENV= production", //会使用production中的配置，合并default中的配置
  },

2 dotenv

js
https://www.npmjs.com/package/dotenv

npm install dotenv cross-env --save

创建.env文件
require('dotenv').config()
console.log(process.env) // remove this after you've confirmed it is working

vue3-grid-layout

js
npm install vue3-grid-layout
说明
{
   x: 0,   // 第几列开始
   y: 0,   // 第几行开始
   w: 3,   // 占几列宽
   h: 2,   // 占几行高
   i: '0', // 唯一id
   name:'图表1'
}


参数	作用
col-num	一行多少列
row-height	每一行高度
is-draggable	是否允许拖动
is-resizable	是否允许缩放
vertical-compact	自动紧凑排列
margin	模块间距
use-css-transforms	是否启用css动画
responsive	是否响应式
prevent-collision	是否禁止重叠



使用
<template>
  <grid-layout
    v-model:layout="layout"
    :col-num="12"
    :row-height="80"
    :is-draggable="true"
    :is-resizable="true"
    :vertical-compact="true"
    :margin="[10,10]"
    :use-css-transforms="true"
  >
    <grid-item
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
    >
      <div class="grid-box">
        {{ item.name }}
      </div>
    </grid-item>
  </grid-layout>
</template>

<script setup>
import { ref } from 'vue'
import { GridLayout, GridItem } from 'vue3-grid-layout'

const layout = ref([
  { x: 0, y: 0, w: 3, h: 2, i: '0', name: '图表1' },
  { x: 3, y: 0, w: 3, h: 2, i: '1', name: '图表2' },
  { x: 6, y: 0, w: 3, h: 2, i: '2', name: '图表3' },
  { x: 9, y: 0, w: 3, h: 2, i: '3', name: '图表4' }
])
</script>

<style scoped>
.grid-box {
  width: 100%;
  height: 100%;
  background: #1d2330;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
</style>