egg typescript element kit

egg-typescript-element-kit

基於Egg + TypeScript + Element + Webpack3 多頁面和單頁面服務端客戶端渲染同構完整工程專案.

• 前台系統：http://localhost:7001

• 後台系統：http://localhost:7001/admin

1. 項目介紹

插件版本

• 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

專案特性

• 支援Egg Node 端程式碼和前端程式碼TypeScript 編寫和構建

• 支援service worker 自動化構建

• 支援async 和await 特性, Controller 採用class 方式編寫

• 支援server 和client 端程式碼修改, Webpack 時時編譯和熱更新, npm run dev一鍵啟動應用

• 基於vue + vuex + vue-router + axios 單一頁面伺服器客戶端同構實現

• 支援開發環境, 測試環境，正式環境Webpack 編譯

• 支援js/css/image 資源依賴, 內建支援CDN特性

• 支援Webpack DLL 自動化構建

• 支援Vue 元件服務端渲染非同步加載

2. 系統功能

前台博客系統

採用Egg + Vue 服務端渲染

• 部落格首頁
• 部落格文章清單展示
• 部落格文章詳情頁面
• 部落格分類瀏覽

後台管理系統

採用Egg + Vue + Vue-Router + Element 單一頁面服務端同構渲染

• 使用者登陸
• 用戶註冊
• Dashboard
• 文章管理
• Markdown新增文章
• 權限管理

3. 使用

3.1 安裝依賴

npm install
npm start

3.2 啟動應用

npm run dev

應用程式存取: http://127.0.0.1:7001

3.3 構建

• TypeScript Egg 構建

npm run tsc

• TypeScript 前端工程構建

npm run tsc

3.4 打包部署

1. 先執行npm run build建置TypeScript Egg 程式碼和TypeScript 前端程式碼
2. 專案程式碼和建置程式碼一起打包程式碼
3. 應用部署後，透過npm start啟動應用

4. 文件

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

5. 參考資料

• vue-element-admin

License

MIT