egg typescript element kit

egg-typescript-element-kit

Based on Egg + TypeScript + Element + Webpack3 multi-page and single-page server-side client rendering isomorphic complete engineering project.

• Front desk system: http://localhost:7001

• Backend system: http://localhost:7001/admin

1. Project introduction

Plugin version

• Egg: ^2.xx
• Node: Node ^8.x.x+,
• Webpack^4.xx
• Vue: ^2.5.0
• TypeScript: ^2.6.2
• Element UI: ^2.0.0
• easywebpack-vue
• egg-view-vue-ssr
• egg-webpack
• egg-webpack-vue

Project characteristics

• Support Egg Node side code and front-end code TypeScript writing and building

• Support service worker automated construction

• Supports async and await features, Controller is written in class mode

• Supports server and client code modification, Webpack real-time compilation and hot update, npm run dev one-click application startup

• Based on vue + vuex + vue-router + axios single page server client isomorphic implementation

• Supports development environment, test environment, and formal environment Webpack compilation

• Support js/css/image resource dependency, built-in support for CDN features

• Support Webpack DLL automated construction

• Support Vue component server-side rendering and asynchronous loading

2. System functions

Front desk blog system

Using Egg + Vue server-side rendering

• Blog homepage
• Blog article list display
• Blog article details page
• Blog category browsing

Backend management system

Using Egg + Vue + Vue-Router + Element single page server-side isomorphic rendering

• User login
• User registration
• Dashboard
• Article management
• Markdown add article
• Permission management

3. Use

3.1 Install dependencies

npm install
npm start

3.2 Start the application

npm run dev

Application access: http://127.0.0.1:7001

3.3 Build

• TypeScript Egg build

npm run tsc

• TypeScript front-end project construction

npm run tsc

3.4 Package deployment

1. First run npm run build to build TypeScript Egg code and TypeScript front-end code
2. Project code and build code are packaged together
3. After the application is deployed, start the application through npm start

4. Documentation

• http://hubcarl.github.io/easywebpack/vue/rule
• https://zhuanlan.zhihu.com/easywebpack

5. References

• vue-element-admin

License

MIT