Vite+Vue3 项目 华仔待办
此“华仔”，不是彼“华仔”，你懂的！先来了个截图
紧跟着，实现步骤也来了
1. 安装 Node.js，终端运行 npm create vue@latest，项目名 vue-to-do，后面的选项全选 No；
2. cd vue-to-do 进入项目目录，npm install 安装依赖，npm run dev 启动 Vite 开发服务器；
3. 修改 index.html 和 main.js；
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<template>
<ToDoHead />
<ToDoBody />
</template><meta charset="UTF-8">
<template>
<ToDoHead />
<ToDoBody />
</template><link rel="icon" href="/favicon.ico">
<template>
<ToDoHead />
<ToDoBody />
</template><meta name="viewport" content="width=device-width, initial-scale=1.0">
<template>
<ToDoHead />
<ToDoBody />
</template><title>华仔待办</title>
</head>
<body>
<template>
<ToDoHead />
<ToDoBody />
</template>
<template>
<ToDoHead />
<ToDoBody />
</template>
<template>
<ToDoHead />
<ToDoBody />
</template>
</body>
</html>src/main.js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用 传根组件
createApp(App).mount('#app')4. 修改 App.vue 根组件，添加 ToDoHead.vue ToDoBody.vue 两个子组件；
src/App.vue
<template>
<ToDoHead />
<ToDoBody />
</template>src/components/ToDoHead.vue
<template>
<h1>华仔待办</h1>
</template>src/components/ToDoBody.vue
<template>
<ToDoHead />
<ToDoBody />
</template>还没有任务，请添加。
<template>
<ToDoHead />
<ToDoBody />
</template>{{ index+1 }}. {{ task.name }}
<template>
<ToDoHead />
<ToDoBody />
</template>共 {{ tasks.length }} 个 清理5. 修改 main.css 页面样式；
src/assets/main.css
.stats {
color: #888;
}
.completed {
color: #888;
text-decoration: line-through;
}What？You can't understand？
问时迟，那时快。这五个步骤突然化身为五枚金币，不慢不快地，躲进一个金光闪闪的“宝盒”里。大侠！还不快去 take 走？
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]