简单的vue小项目
时间: 2023-07-28 08:20:07 浏览: 47
一个简单的 Vue 小项目可以是一个待办事项列表应用程序。你可以使用 Vue CLI 来创建一个新的项目,然后添加一个组件来显示待办事项列表。以下是一个简单的例子:
1. 使用 Vue CLI 创建一个新项目:
```
vue create todo-list
```
2. 添加一个 TodoList 组件:
在 `src/components` 目录下创建一个新文件 `TodoList.vue`,并添加以下代码:
```
<template>
<div>
<h1>My Todo List</h1>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, title: 'Learn Vue' },
{ id: 2, title: 'Build an app' },
{ id: 3, title: 'Deploy the app' }
]
}
}
}
</script>
```
3. 在 App.vue 中使用 TodoList 组件:
在 `src/App.vue` 文件中,将 `<template>` 标签中的内容替换为以下代码:
```
<template>
<div id="app">
<TodoList />
</div>
</template>
<script>
import TodoList from './components/TodoList.vue'
export default {
name: 'App',
components: {
TodoList
}
}
</script>
```
4. 运行应用程序:
在终端中运行以下命令:
```
npm run serve
```
你应该可以在浏览器中看到一个简单的待办事项列表。
这只是一个简单的例子,你可以根据自己的需求添加更多的功能和页面。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)