使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

前言

Vue3.x 即将来袭，使用 TypeScirpt 重构，TypeScript 将成为 vue 社区的标配，出于一名程序员的焦虑，决定现在 Vue2.6.x 踩一波坑。

vue 官方文档已经简略地对 typescript 的支持进行了介绍，我们使用 Vue Cli3 直接生成项目

创建项目

❓为什么使用 Vue Cli3 构建项目

官方维护，后续升级减少兼容性问题

使用以下配置进行项目的生成：

╭─~/otherEWokspace╰─➤ vue create ts-vuex-demoVue CLI v3.6.3┌───────────────────────────┐│ Update available: 3.9.3 │└───────────────────────────┘? Please pick a preset: Manually select features? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit? Use class-style component syntax? Yes? Use Babel alongside TypeScript for auto-detected polyfills? Yes? Use history mode for router? (Requires proper server setup for index fallback in production) Yes? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)? Pick a linter / formatter config: TSLint? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save? Pick a unit testing solution: Jest? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files? Save this as a preset for future projects? Yes? Save preset as: ts-vue-demo

看一下新项目的层级目录

╭─~/otherEWokspace/ts-vuex-demo ‹master›╰─➤ tree -L 2 -I node_modules.├── README.md├── babel.config.js├── jest.config.js├── package-lock.json├── package.json├── postcss.config.js├── public│  ├── favicon.ico│  └── index.html├── src│  ├── App.vue│  ├── assets│  ├── components│  ├── main.ts│  ├── router.ts│  ├── shims-tsx.d.ts│  ├── shims-vue.d.ts│  ├── store.ts│  └── views├── tests│  └── unit├── tsconfig.json└── tslint.json

tsconfig.json

对 lib 、 target 、 module 进行解释

{ "compilerOptions": {  "target": "esnext",  "module": "esnext",  "strict": true,  "jsx": "preserve", // 开启对 jsx 的支持  "importHelpers": true,  "moduleResolution": "node",  "experimentalDecorators": true,  "esModuleInterop": true,  "allowSyntheticDefaultImports": true,  "sourceMap": true,  "baseUrl": ".",  "types": [   "webpack-env",   "jest"  ],  "paths": {   "@/*": [    "src/*"   ]  },  "lib": [   "esnext",   "dom",   "dom.iterable",   "scripthost"  ] }, "include": [  "src/**/*.ts",  "src/**/*.tsx",  "src/**/*.vue",  "tests/**/*.ts",  "tests/**/*.tsx" ], "exclude": [  "node_modules" ]}