根據配置生成組件

時間 2019-11-06

標籤根據配置生成組件简体版

原文原文鏈接

根據配置生成組件

這個想法好久以前就有了，也用多種方式實現過，AST實現比較複雜，各位有興趣能夠本身查看各種資料css

爲何有這個想法了：vue

每次使用其餘ui框架時避免不了和設計師的ui圖不一致須要修改源代碼或者修改樣式，無法作到真正的自定義組件

我這裏只教你們用最簡單的方式實現，本人也以爲這種方式最好node

讀如下內容必需要會 express ejs axios

下面一步一步的來實現ios

所需的npm包

express
ejs
body-parser

這是基本目錄結構

生成的組件放在 components 文件夾裏面
template 文件夾是存放組件模板
router 文件夾是路由文件
app.js 文件是服務器入口文件

app.js文件內容

下面代碼都是node的基本操做就再也不此講解了git

const express = require('express')
const bodyParser = require('body-parser')
const router = require('./router')
const app = express()
var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
}
app.use(allowCrossDomain)
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(router)
app.listen(8000, () => {  console.log('服務器已啓動~~~~~~~')})複製代碼

在template文件夾建立badge.txt文件

這裏是重點這裏實際是ejs模板github

看不懂的請移步ejsexpress

<%#
height: 高度
background: 背景色
padding: 左右兩邊的大小
fontSize: 字體大小
dotSize: 小圓點的大小
%>
<template>
  <div class="min-badge">
    <slot></slot>
    <div class="min-badge-dot" v-if="dot"></div>
    <div class="min-badge-count" v-else-if="count">{{finalCount}}</div>
  </div>
</template>

<script>
export default {
  name: 'min-badge',
  props: {
    count: {
      type: Number,
      default: 0
    },
    maxCount: {
      type: Number,
      default: 99
    },
    dot: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    finalCount () {
      return this.count > this.maxCount ? `${this.maxCount}+` : this.count
    }
  }
}
</script>

<style scoped>
.min-badge {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.min-badge-count {
  position: absolute;
  transform: translateX(50%);
  top: -12rpx;
  right: 0;
  height: <%= height %>rpx;
  border-radius: 1000px;
  min-width: 30rpx;
  background: <%= background %>;
  color: #fff;
  line-height: <%= height %>rpx;
  text-align: center;
  padding: 0 <%= padding %>rpx;
  font-size: <%= fontSize %>rpx;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 0 0 1px #fff;
  box-sizing: border-box;
}
.min-badge-dot {
  position: absolute;
  transform: translateX(-50%);
  top: -<%= dotSize / 2 %>rpx;
  right: -<%= dotSize %>rpx;
  height: <%= dotSize %>rpx;
  width: <%= dotSize %>rpx;
  border-radius: 100%;
  background: <%= background %>;
  z-index: 10;
  box-shadow: 0 0 0 1px #fff;
}
</style>複製代碼

建立路由文件index.js

const express = require('express')
const router = express.Router()
const fs = require('fs')
const path = require('path')
const ejs = require('ejs')
function renderFile (path, data) {
  return new Promise((reslove, reject) => {
    ejs.renderFile(path, data, (error, data) => {
      if (error) {
        reject(error)
      }
      reslove(data)
    })
  })
}
function writeFile (path, data) {
  return new Promise((reslove, reject) => {
    fs.writeFile(path, data, (err) => {
      if (err) {
        reject(err)
      }
      reslove(null)
    })
  })
}
// 徽章組件
router.post('/badge', (req, res) => {
  renderFile(path.join(__dirname, '../template/badge.txt'), req.body).then(data => {
    return writeFile(path.join(__dirname, '../components/badge.vue'), data)
  }).then(() => {
    res.send({code: 0, msg: '建立成功'})
  }).catch(err => {
    console.log(err)
    res.send({code: 1, msg: '建立失敗'})
  })
})
module.exports = router複製代碼

在create-components-data建立badge.js文件

const badge = {
  // 小圓點的大小
  dotSize: 16,
  // 高度
  height: 30,
  // 背景色
  background: '#dd524d',
  // 左右兩邊的大小
  padding: 10,
  // 字體大小
  fontSize: 20
}

module.exports = badge複製代碼

在客服端發送請求

原本是想放服務器上面的，讓你們能夠直接訪問的，可奈何本人太窮買不起服務器npm

在這裏有無限可能，像什麼能夠拖拽生成頁面均可以使用這種方式json

這張圖只是表示badge的配置能夠是ui互動產生的結果axios

badge能夠是ui互動產生的結果，也能夠是json可視化生成的結果

const badge = {
  // 小圓點的大小
  dotSize: 16,
  // 高度
  height: 30,
  // 背景色
  background: '#dd524d',
  // 左右兩邊的大小
  padding: 10,
  // 字體大小
  fontSize: 20
}
// 發送請求
axios.post('/badge', badge)複製代碼

本地測試

建立test文件夾在裏面建立testBadge.js文件

const fs = require('fs')
const path = require('path')
const ejs = require('ejs')
const badge = require('../create-components-data/badge')
function renderFile (path, data) {
  return new Promise((reslove, reject) => {
    ejs.renderFile(path, data, (error, data) => {
      if (error) {
        reject(error)
      }
      reslove(data)
    })
  })
}
function writeFile (path, data) {
  return new Promise((reslove, reject) => {
    fs.writeFile(path, data, (err) => {
      if (err) {
        reject(err)
      }
      reslove(null)
    })
  })
}
renderFile(path.join(__dirname, '../template/badge.txt'), badge).then(data => {
  return writeFile(path.join(__dirname, '../components/badge.vue'), data)
}).then(() => {
  console.log('建立成功')
}).catch(err => {
  console.log(err)
})複製代碼