Internet of Data - Control Panel - Frontend

Upstream template: @daotl/fes-starter.

Getting started

Important: Use Volar take over mode in VSCode

Commit changes

Setup VS Code as the Git editor:

git config --global core.editor "code --wait"

Commit with Commitizen:

npx cz

Or still use git commit and follow the Conventional Commits spec, your commits will be linted before accepted.

Technology stack

Basic:

• TypeScript
• fes.js based on Vue 3 and Webpack
• JSX (optional, to replace Vue's template syntax)
• SASS with SCSS syntax for styling
• ESLint with @daotl/eslint-config-vue for linting
• Prettier with @daotl/prettier-config for code formatting
• Stylelint for linting CSS and SCSS

master branch:

• Element Plus: component library
• Pinia: state management
• Iconify icons with unplugin-icons

antd branch:

• Ant Design Vue: component library

Project setup

npm install -g @fesjs/create-fes-app
npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run prod

Lint & fix

npm run lint
npm run lint:fix

See Fes.js CLI docs and package.json for more.

Guides & References

Must-read

Read the following must-read to understand the technology stack of this template.

• Fes.js Docs
• <script setup> RFC
• What is Vue 3 Reactivity?
• Vue 3 Reactivity API
• Vue 3 Composition API
• Vue 3 TypeScript Support
• Using Vue 3 with JSX and TypeScript
• Vue Style Guide

Recommended

• Explaining The New script setup Type in Vue 3 – Major Takeaways from the RFC
• New script setup (without ref sugar)
• 探索 Vue 3 中的 JSX