需求

开发一个在线文档任务管理工具

纯手工从0到1编码，没有使用脚手架

前端项目GitHub地址
 后端项目GitHub地址

前端运行:
npm run dev
npm run ssr

后端运行: npm run dev

访问: http://localhost:8421/todo

技术栈

前端：
  编辑器：VSCode
  源码管理：Git
  包管理器：Pnpm
  编译构建：Babel、Webpack
  语言：TypeScript
  框架：Vue3
  路由：Vue-Router
  状态管理：Vuex
  CSS处理器：Sass、Less、PostCSS
  UI框架：ElementPlus

SSR:
  框架：Koa
    
后端：
  框架：Koa
  对象关系映射：TypeORM
  数据库：MySQL

前端组织结构

build                         --- 构建脚本
dist                          --- 打包生成
public                        --- 公共资源
src
  client
    components                --- UI组件
    constants                 --- 常量
    hooks                     --- 自定义hook
    styles                    --- 样式
    utils                     --- 工具
  server
  share
    router                    --- 路由
    store                     --- store
      subModule               --- 子模块
        actions.ts
        getters.ts
        index.ts
        mutations.ts
      actions.ts
      getters.ts
      index.ts
      mutations.ts
    App.vue                   --- 共用模板
  shims-vue.d.ts
test                          --- 测试

component, store 都按照业务功能模块划分

在component中最好不要直接commit(mutation)，而是通过dispatch(action)，然后在action中调用commit(mutation)

后端组织结构

src
  constants             --- 常量
  controller            --- 控制器
  entity                --- 实体类
  router                --- 路由
  utils                 --- 工具
  data-source.ts        --- ORM配置
  server.ts             --- 入口文件
test
.env                    --- 环境变量
.eslintrc
package.json
tsconfig.json

技术拆解

响应式布局
使用Node.js服务端实现本地任务管理

TypeScript配置

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": false,
    "skipLibCheck": true
  }
}

依赖项

webpack打包构建
  webpack webpack-cli webpack-dev-server webpack-merge
html
  html-webpack-plugin
css
  style-loader css-loader sass sass-loader less less-loader postcss postcss-loader postcss-preset-env mini-css-extract-plugin
typescript
  typescript ts-loader
vue
  vue vue-router vuex
  vue-loader
babel
  @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime
axios
UI
  element-plus echarts
test
eslint
cross-env nodemon ts-node

常见错误

性能优化

cacheDirectory 把转译结果缓存到文件系统中
@babel/plugin-transform-runtime 避免重复引入babel-runtime

前端Vue3 SSR + TS + 后端Koa Server + MySQL - 全栈实战（四）

需求

技术栈

前端组织结构

后端组织结构

技术拆解

TypeScript配置

依赖项

常见错误

性能优化