在这一节中，我们将完成一个简单的 Vue.js 项目，并且学习如何将这个项目部署到互联网上。
项目概述
我们将创建一个简单的待办事项应用，允许用户添加和删除待办事项。这个应用将展示 Vue.js 的基本用法，包括数据绑定、事件处理和组件。
项目结构
项目结构如下：
1
2
3
4
| todo-app/
├── index.html
├── app.js
└── style.css
|
第一步：创建 index.html
在 index.html 中，我们将引入 Vue.js 库，并创建基本的 HTML 结构。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项应用</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<h1>待办事项</h1>
<input type="text" v-model="newTask" placeholder="输入待办事项" @keyup.enter="addTask">
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }} <button @click="removeTask(index)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="app.js"></script>
</body>
</html>
|
代码分析
- 使用
v-model 绑定输入框的值到 newTask 数据属性。
- 使用
v-for 指令循环渲染待办事项列表。
- 使用
@click 事件指令绑定删除功能。
第二步：创建 app.js
在 app.js 中，我们将定义 Vue 实例及其数据和方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| new Vue({
el: '#app',
data: {
newTask: '',
tasks: []
},
methods: {
addTask() {
if (this.newTask) {
this.tasks.push(this.newTask);
this.newTask = '';
}
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
});
|
代码分析
data 用于存储应用的状态，其中 newTask 是当前输入的待办事项，tasks 是待办事项数组。addTask 方法用于添加新的待办事项，removeTask 方法用于删除指定索引的待办事项。
第三步：创建 style.css
在 style.css 中，我们添加一些基本样式，让应用看起来更美观。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
#app {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
background-color: #ff6b6b;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #ff4d4d;
}
|
第四步：测试项目
完成以上步骤后，打开 index.html 文件，您应该可以看到待办事项应用的界面。可以尝试添加一些待办事项，并通过点击“删除”按钮来移除它们。
第五步：部署项目
要将我们的项目部署到互联网上，您可以选择多种方式，例如使用 GitHub Pages、Netlify 或 Vercel。我们以 GitHub Pages 为例：
准备工作
- 确保您已经安装了 Git。
- 创建一个新的 GitHub 仓库。
提交项目
在项目目录中，打开终端并执行以下命令：
1
2
3
4
5
| git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/用户名/仓库名.git
git push -u origin master
|
启用 GitHub Pages
- 进入您 GitHub 上的项目仓库。
- 点击 “Settings”。
- 向下滚动到 “GitHub Pages” 部分。
- 从 “Source” 下拉菜单中选择
master branch，然后点击 “Save”。
访问您的应用
几分钟后，您的待办事项应用就会通过 https://用户名.github.io/仓库名/ 网址访问。
总结
在本节中，我们创建了一个简单的待办事项应用，并学习了如何将其部署到互联网。通过这些步骤，您可以开始探索 Vue.js 的更多功能，并创建更复杂的应用程序。
