Vue3 学习教程，从入门到精通，Vue.js 待办事项项目开发(40）

知识分享小能手2025-08-20 6:08

Vue.js 待办事项项目开发

本文档将基于您提供的"待办事项"项目内容，详细介绍 Vue.js 项目开发过程中涉及的语法知识点、使用方法，并结合具体案例代码进行说明。同时，最后将提供一个综合性的"待办事项"应用案例，帮助您全面理解 Vue.js 项目开发流程。

一、开发环境搭建

1. Node.js 环境

简介: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，用于服务器端和桌面应用开发。

安装:

  • 前往 Node.js 官网 下载并安装最新的 LTS 版本。
  • 安装完成后，可以通过以下命令验证安装：
bash 复制代码 
node -v
npm -v

2. 包管理工具

简介: npm（Node Package Manager）是 Node.js 默认的包管理工具，用于安装和管理项目依赖。

常用命令:

  • 安装包:

    bash 复制代码 
    npm install <package-name>

  • 全局安装包:

    bash 复制代码 
    npm install -g <package-name>

  • 初始化项目:

    bash 复制代码 
    npm init

3. 安装 Vue CLI 脚手架

简介: Vue CLI 是 Vue.js 官方提供的标准工具链，用于快速搭建 Vue.js 项目。

安装:

bash 复制代码 
npm install -g @vue/cli

验证安装:

bash 复制代码 
vue --version

二、创建 Vue.js 项目

1. 使用 vue create 命令创建项目

步骤:

  1. 打开终端或命令提示符。
  2. 导航到您希望创建项目的目录。
  3. 运行以下命令：
bash 复制代码 
vue create my-todo-app

选项说明:

  • Manually select features: 手动选择功能。
  • 选择 Babel、Router、Vuex、Linter/Formatter 等，根据项目需求选择。

示例:

bash 复制代码 
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◉ Router
 ◉ Vuex
 ◉ Linter/Formatter
 ◯ Unit Testing
 ◯ E2E Testing

2. 使用图形化界面创建项目

步骤:

  1. 运行以下命令启动图形化界面：

    bash 复制代码 
    vue ui

  2. 在浏览器中打开提示的地址（通常是 http://localhost:8000）。

  3. 点击"创建项目"，按照提示选择配置和功能。

三、项目文件结构

一个典型的 Vue.js 项目文件结构如下：

复制代码 
my-todo-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── package.json
├── package-lock.json
├── vue.config.js
└── README.md

主要文件说明:

  • public/index.html: 应用的入口 HTML 文件。
  • src/main.js: 应用的入口 JavaScript 文件。
  • src/App.vue: 根组件。
  • src/components/: 存放可复用的 Vue 组件。
  • src/views/: 存放页面级组件。
  • src/router/index.js: 路由配置文件。

四、项目功能开发

1. 初始化项目

在 src/main.js 中初始化 Vue 应用：

javascript 复制代码 
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2. 创建组件

示例 : 创建 TodoList.vue 组件

vue 复制代码 
<!-- src/components/TodoList.vue -->
<template>
  <div>
    <h2>待办事项列表</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
      </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新事项" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  data() {
    return {
      newTodo: '',
      todos: ['学习 Vue.js', '完成项目']
    }
  },
  methods: {
    addTodo() {
      const trimmedTodo = this.newTodo.trim()
      if (trimmedTodo) {
        this.todos.push(trimmedTodo)
        this.newTodo = ''
      }
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  background: #f1f1f1;
  margin: 5px 0;
  padding: 10px;
}
input {
  padding: 5px;
  margin-right: 10px;
}
button {
  padding: 5px 10px;
}
</style>

3. 使用 Vue Router

配置路由:

javascript 复制代码 
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import TodoList from '@/components/TodoList.vue'
import About from '@/views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'TodoList',
      component: TodoList
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

在 App.vue 中添加导航:

vue 复制代码 
<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
nav {
  background: #333;
  padding: 10px;
}
nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
}
nav a.router-link-exact-active {
  text-decoration: underline;
}
</style>

4. 使用 Vuex 进行状态管理

配置 Vuex:

javascript 复制代码 
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: ['学习 Vue.js', '完成项目']
  },
  mutations: {
    ADD_TODO(state, todo) {
      state.todos.push(todo)
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('ADD_TODO', todo)
    }
  },
  getters: {
    allTodos: state => state.todos
  }
})

修改 TodoList.vue 使用 Vuex:

vue 复制代码 
<!-- src/components/TodoList.vue -->
<template>
  <div>
    <h2>待办事项列表</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
      </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新事项" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'TodoList',
  data() {
    return {
      newTodo: ''
    }
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapActions(['addTodo']),
    addTodo() {
      const trimmedTodo = this.newTodo.trim()
      if (trimmedTodo) {
        this.$store.dispatch('addTodo', trimmedTodo)
        this.newTodo = ''
      }
    }
  }
}
</script>

<style scoped>
...
</style>

5. 运行和打包

运行开发服务器:

bash 复制代码 
npm run serve

打包项目:

bash 复制代码 
npm run build

五、综合性案例：待办事项应用

以下是一个综合性的"待办事项"应用案例，集成了 Vue.js、Vue Router 和 Vuex。

1. 项目结构

复制代码 
src/
├── components/
│   └── TodoList.vue
├── views/
│   ├── Home.vue
│   └── About.vue
├── App.vue
├── main.js
├── router/
│   └── index.js
└── store/
    └── index.js

2. main.js

javascript 复制代码 
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. App.vue

vue 复制代码 
<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
nav {
  background: #333;
  padding: 10px;
}
nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
}
nav a.router-link-exact-active {
  text-decoration: underline;
}
</style>

4. router/index.js

javascript 复制代码 
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

5. store/index.js

javascript 复制代码 
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    ADD_TODO(state, todo) {
      state.todos.push(todo)
    },
    REMOVE_TODO(state, index) {
      state.todos.splice(index, 1)
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('ADD_TODO', todo)
    },
    removeTodo({ commit }, index) {
      commit('REMOVE_TODO', index)
    }
  },
  getters: {
    allTodos: state => state.todos
  }
})

6. components/TodoList.vue

vue 复制代码 
<!-- src/components/TodoList.vue -->
<template>
  <div>
    <h2>待办事项列表</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新事项" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'TodoList',
  data() {
    return {
      newTodo: ''
    }
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapActions(['addTodo', 'removeTodo']),
    addTodo() {
      const trimmedTodo = this.newTodo.trim()
      if (trimmedTodo) {
        this.$store.dispatch('addTodo', trimmedTodo)
        this.newTodo = ''
      }
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  background: #f1f1f1;
  margin: 5px 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
input {
  padding: 5px;
  margin-right: 10px;
}
button {
  padding: 5px 10px;
  background: #42b983;
  color: #fff;
  border: none;
  cursor: pointer;
}
button:hover {
  background: #369b6e;
}
</style>

7. views/Home.vue

vue 复制代码 
<!-- src/views/Home.vue -->
<template>
  <div>
    <TodoList/>
  </div>
</template>

<script>
import TodoList from '@/components/TodoList.vue'

export default {
  name: 'Home',
  components: {
    TodoList
  }
}
</script>

<style>
...
</style>

8. views/About.vue

vue 复制代码 
<!-- src/views/About.vue -->
<template>
  <div>
    <h2>关于</h2>
    <p>这是一个使用 Vue.js、Vue Router 和 Vuex 构建的待办事项应用。</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style>
...
</style>

六、运行项目

  1. 安装依赖:

    bash 复制代码 
    npm install

  2. 运行开发服务器:

    bash 复制代码 
    npm run serve

  3. 访问应用 :

    打开浏览器，访问 http://localhost:8080。

七、总结

本文档详细介绍了 Vue.js 项目开发的基础知识，包括开发环境搭建、项目创建、文件结构、组件开发、路由配置、状态管理以及项目运行和打包。同时，通过一个综合性的"待办事项"应用案例，展示了 Vue.js、Vue Router 和 Vuex 的实际应用，帮助您更好地理解和掌握 Vue.js 项目开发流程。

热门推荐
01UV安装并设置国内源02A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程03UV 工具安装与国内镜像源配置指南04解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题05教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员06KGG转MP3工具|非KGM文件|解密音频07突破百度网盘的下载限速，两种方法教会你【超详细】08conda中设置镜像地址（附所有可换的地址）092025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享，全网首发高质量！！！10不再让Windows更新！&Edge游戏助手卸载及关闭自动更新