forked from iod/cpnode-front
95 lines
3.2 KiB
Markdown
95 lines
3.2 KiB
Markdown
# Internet of Data - Control Panel - Frontend
|
||
|
||
Upstream template: [@daotl/fes-starter](https://github.com/daotl/fes-starter).
|
||
|
||
## Getting started
|
||
|
||
[Important: Use Volar take over mode in VSCode](https://github.com/johnsoncodehk/volar/discussions/471)
|
||
|
||
## Commit changes
|
||
|
||
Setup VS Code as the Git editor:
|
||
|
||
```shell
|
||
git config --global core.editor "code --wait"
|
||
```
|
||
|
||
Commit with [Commitizen](https://commitizen.github.io/cz-cli/):
|
||
|
||
```shell
|
||
npx cz
|
||
```
|
||
|
||
Or still use `git commit` and follow [the Conventional Commits spec](https://www.conventionalcommits.org/en/v1.0.0/#summary), your commits will be linted before accepted.
|
||
|
||
## Technology stack
|
||
|
||
Basic:
|
||
|
||
- [TypeScript](https://www.typescriptlang.org/)
|
||
- [fes.js](https://github.com/WeBankFinTech/fes.js) based on [Vue 3](https://v3.vuejs.org/) and [Webpack](https://webpack.js.org/)
|
||
- [JSX](https://v3.vuejs.org/guide/render-function.html#jsx) (optional, to replace Vue's template syntax)
|
||
- [SASS](https://sass-lang.com/) with [SCSS](https://sass-lang.com/documentation/syntax#scss) syntax for styling
|
||
- [ESLint](https://eslint.org/) with [@daotl/eslint-config-vue](https://github.com/daotl/web-style-configs#using-eslint-config) for linting
|
||
- [Prettier](https://prettier.io/) with [@daotl/prettier-config](https://github.com/daotl/web-style-configs#using-prettier-config) for code formatting
|
||
- [Stylelint](https://stylelint.io/) for linting CSS and SCSS
|
||
|
||
`master` branch:
|
||
|
||
- [Element Plus](https://element-plus.org/): component library
|
||
- [Pinia](https://pinia.vuejs.org/): state management
|
||
- [Iconify](https://iconify.design/) icons with [unplugin-icons](https://github.com/antfu/unplugin-icons)
|
||
|
||
`antd` branch:
|
||
|
||
- [Ant Design Vue](https://www.antdv.com/): component library
|
||
|
||
## Project setup
|
||
|
||
```shell
|
||
npm install -g @fesjs/create-fes-app
|
||
npm install
|
||
```
|
||
|
||
### Compiles and hot-reloads for development
|
||
|
||
```shell
|
||
npm run dev
|
||
```
|
||
|
||
### Compiles and minifies for production
|
||
|
||
```shell
|
||
npm run prod
|
||
```
|
||
|
||
### Lint & fix
|
||
|
||
```shell
|
||
npm run lint
|
||
npm run lint:fix
|
||
```
|
||
|
||
See [Fes.js CLI docs](https://winixt.gitee.io/fesjs/zh/reference/cli/) and [package.json](./package.json) for more.
|
||
|
||
## Guides & References
|
||
|
||
### Must-read
|
||
|
||
Read the following must-read to understand the technology stack of this template.
|
||
|
||
- [Fes.js Docs](https://winixt.gitee.io/fesjs/zh/guide/)
|
||
- [\<script setup> RFC](https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md)
|
||
- [What is Vue 3 Reactivity?](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity)
|
||
- [Vue 3 Reactivity API](https://v3.vuejs.org/api/reactivity-api.html)
|
||
- [Vue 3 Composition API](https://v3.vuejs.org/api/composition-api.html)
|
||
- [Vue 3 TypeScript Support](https://v3.vuejs.org/guide/typescript-support.html#annotating-props)
|
||
- [Using Vue 3 with JSX and TypeScript](https://bypaulshen.com/posts/vue-3-jsx-typescript)
|
||
- [Vue Style Guide](https://v3.vuejs.org/style-guide/)
|
||
|
||
### Recommended
|
||
|
||
- [Explaining The New script setup Type in Vue 3 – Major Takeaways from the RFC](https://learnvue.co/2021/05/explaining-the-new-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/)
|
||
- [New script setup (without ref sugar)](https://github.com/vuejs/rfcs/pull/227)
|
||
- [探索 Vue 3 中的 JSX](https://juejin.cn/post/6965057432544346143)
|