English πΊπΈ | δΈζ π¨π³
With a deadly lightning storm at his command, Razor charges into battle.
Use front-end tech (Vue/Css/Ts) to build multi-platform from one codebase,
- Mobile - Web H5, Android, iOS
- Desktop - Web PC, Linux, Window, MacOS
Suitable for teams and app scenarios such as,
- small team with some web skills but little mobile experience
- small app with simple interactions, but multi-platform and similar
- The
MC
layer can be reused, but theV
layerUX
is different
The goal is write logic once, run anywhere
- not
learn once
- not
write once
- π TypeScript Main Language Apache
- π Inoic - Mobile UI and
cli
MIT - π Vue SPA Framework MIT
- 𧩠Capacitor - Mobile native MIT
- 𧩠Electron - Desktop native MIT
- π PrimeVue Desktop UI MIT
Based on the Vue Style Guide, with the principles of type safety, readability, and consistency, add the following conventions,
First, html
and http
are case-insensitive, and mac
and win
OS are case-insensitive by default.
camel
-camelCase
(small) andPascalCase
(big)kebab
-kebab-case
all lowercase*.vue
file - MUST bebig-camel
, consistent with Vue official- dir and non-vue file - MUST be
kebab
consistent withindex.js
- source code - js MUST be
camel
, html attr and css MUST bekebab
- component tag - SHOULD be
big-camel
, to distinguish from original html - component prop - in js MUST be
small-camel
, in html MUST bekebab
- emit event - MUST be
kebab
, treated as string, no auto-conversion - i18n - SHOULD use js instead of json, key SHOULD be
camel
Since double quotes are usually used in html which may contain simple js code,
- js content - MUST be single quotes
- html content - MUST be double quotes
semicolon, same as your main language, or otherwise as they are.
- java - keep the semicolon at the end
- kotlin, scala, etc - without semicolon
comma, as much as possible to easy to add, sub and reorder,
- arrays, objects, ts, etc. support comma endings
Components named Index are hard to read, debug and develop.
- prefer to use the full name (
import
andexport
via index.ts) - or specify the
name
attribute (auto inference is recommended)
According to the official Vue naming rules, most things are plural,
- for a single entity, use singular, e.g. store, route
- for multiple fragments, use plural, e.g. views, compents
- to define function,
function
is better thanarrow
lambda - try to specify type,
unknown
instead ofany
- entity code is in
*.ts
, type-only is in*.d.ts
TypeX[]
instead ofArray<TypeX>
when no type inference- Use
if
for flow control,||
or??
for expression - Use absolute path (
@/
), relative path is only. /
and../
- emits, using the ts specification, event name without
on
prefix - props, use
do
prefix forhandle
when passthrough Function - interface/type in SFC, can be in same-name
.d.ts
, but enum in.ts