Vite+Vue3 项目华仔待办

撙仿 · 6 天前

此“华仔”，不是彼“华仔”，你懂的！

先来了个截图

紧跟着，实现步骤也来了
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 走？

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

Vite+Vue3 项目华仔待办

浏览过的版块

签约作者

Vite+Vue3 项目 华仔待办

浏览过的版块

签约作者

Vite+Vue3 项目华仔待办