vite-vue3-lowcode/README.EN.md

base on Vite2.x + Vue3.x + TypeScript H5 Low code platform

English | 中文

Clone the main branch and ignore irrelevant branches such as git-pages

git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git

technology stack

• Programming Language：TypeScript 4.x + JavaScript
• Build Tools：Vite 2.x
• Front End Frame：Vue 3.x
• Subnet Calculator：Vue Router 4.x
• State Management：Vuex 4.x
• PC UI Frame：Element Plus
• H5 UI Frame：vant
• CSS Pre：Stylus / Sass / Less
• HTTP Tool：Axios
• Git Hook 工具：husky + lint-staged
• Coding Standards：EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
• Submit Specifications：Commitizen + Commitlint
• Unit Testing：vue-test-utils + jest + vue-jest + ts-jest
• Auto Deploy：GitHub Actions

Function List

• Add pages dynamically
• Drag and drop components
• service worker + indexeddb Implement server-free front-end interaction
• DataSource Admin Console
• Provide preset functions
• More component encapsulation
• Others...

Generate component properties quickly

// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
let propObj = {
  string: (config) => `createEditorInputProp(${JSON.stringify(config)})`,
  number: (config) => `createEditorInputNumberProp(${JSON.stringify(config)})`,
  boolean: (config) => `createEditorSwitchProp(${JSON.stringify(config)})`
}

JSON.stringify(
  $$('#props + table tbody tr').reduce((prev, curr) => {
    const children = curr.children
    const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase())
    const child3Text = children[3].textContent
    const defaultValue = ['true', 'false'].includes(child3Text)
      ? child3Text
      : `'${child3Text == '-' ? '' : child3Text}'`
    const value = (propObj[children[2].textContent] ?? propObj['string'])({
      label: `'${children[1].textContent}'`,
      defaultValue
    }).replaceAll('"', '')
    prev[key] = value
    return prev
  }, {})
).replaceAll('"', '')

// 在vant文档中 chrome控制台输入以下代码，快速生成组件事件
JSON.stringify(
  $$('#events + table tbody tr').reduce((prev, curr) => {
    const children = curr.children
    const event = {
      label: children[1].textContent,
      value: children[0].textContent
    }
    return prev.concat([event])
  }, [])
)
  .replaceAll(/(?<!:)\"(?!,|})/g, '')
  .replace(/\"/g, "'")

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, not IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Git Contribution submission specification

• feat Add new features
• fix Fix the problem/BUG
• style The code style is related and does not affect the running result
• perf Optimization/performance improvement
• refactor Refactor
• revert Undo edit
• test Test related
• docs Documentation/notes
• chore Dependency update/scaffolding configuration modification etc.
• workflow Workflow improvements
• ci Continuous integration
• types Type definition file changes
• wip In development

QUICK START

Install and use

npm install
# or
yarn add

run

npm run dev

build

npm run build