2021-12-27 02:44:31 +00:00
# fes-starter
2021-12-26 09:14:46 +00:00
2021-12-27 02:44:31 +00:00
A [fes.js ](https://github.com/WeBankFinTech/fes.js ) + TypeScript starter template.
2021-12-27 07:34:51 +00:00
## 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]() 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
`antd` branch:
- [Ant Design Vue ](https://www.antdv.com/ ): component library
## Project setup
```shell
npm install
```
### Compiles and hot-reloads for development
```shell
fes dev
```
### Compiles and minifies for production
```shell
fes build
```
### Lint & fix
```shell
npm run lint
npm run lint:fix
```
See [Fes.js CLI docs ](https://winixt.gitee.io/fesjs/zh/reference/cli/ ) 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 )
- [Vue 3 Reactivity ](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity )
- [Vue 3 Composition API ](https://v3.vuejs.org/guide/composition-api-introduction.html#reactive-variables-with-ref )
- [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 – ](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 )
