持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
前言
- 之前，我们在不使用脚手架，只使用 vue3 api 的情况下，完成了 todoMvc项目从静态页面到业务功能落地的开发。
- 我们做项目肯定还是要使用脚手架做开发的，所以接下来，我们使用脚手架来改造我们的项目。
使用vite搭建项目
我这里直接使用vite来搭建项目，如果对webpack感兴趣的，可以自己搭建一下，业务逻辑还是都一样的。
npm init vue@3
✔ Project name: … defineComponent 项目名称
✔ Add TypeScript? … No 是否使用ts
✔ Add JSX Support? … No 是否需要支持jsx
✔ Add Vue Router for Single Page Application development? … No 是否使用vue-router
✔ Add Pinia for state management? … No 是否使用pinia
✔ Add Vitest for Unit Testing? … No 是否使用vitest测试
✔ Add Cypress for both Unit and End-to-End testing? … No 是否使用cypress测试
✔ Add ESLint for code quality? … Yes 是否使用eslint
✔ Add Prettier for code formatting? … Yes 是否使用prettier
我们可以看到，新创建的项目默认使用的是
setup语法糖，这个我们后面会讲。目前我们还是先用学过的方式创建sfc。
如果我们想更好地获取
setup()参数的类型推断，我们需要使用defineComponent定义我们的组件，这样可以获得类型提示。
引入todoMvc的样式文件
- vite中，
index.html文件不在public下，而是在根目录下，加入我们的样式文件就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
页面迁移和逻辑迁移
- 我们先把之前写好的逻辑迁移过来。只需要把页面和
setup中的内容迁移过来就可以了,具体逻辑就不细看了，和之前不依赖脚手架时候写的一样，大概就是这样。 - App.vue
- 迁移过来之后测试下是否运行正常。
总结
我们的todomvc项目从不依赖脚手架，迁移到使用脚手架的过程很轻松。得益于都是依赖于vue3的sfc模式和setup函数。详细的代码可以看下我的github
接下来我们要对整个项目动刀子了，使用组件方式拆分整个项目。
