Vue.js 项目实战

通过实际项目学习Vue.js开发

1. 项目规划

项目概述

我们将开发一个任务管理应用，包含以下功能：

  • 用户认证
  • 任务CRUD操作
  • 任务分类和标签
  • 任务搜索和筛选
  • 数据持久化

// 项目结构
project/
  ├── src/
  │   ├── components/
  │   │   ├── auth/
  │   │   ├── tasks/
  │   │   └── common/
  │   ├── views/
  │   ├── store/
  │   ├── router/
  │   ├── api/
  │   └── utils/
  ├── public/
  └── package.json

2. 环境搭建

开发环境配置

  • Node.js和npm安装
  • Vue CLI安装
  • 项目依赖配置
  • 开发工具配置

# 创建项目
vue create task-manager

# 安装依赖
npm install vuex@next vue-router@4 axios element-plus

# 启动开发服务器
npm run serve

3. 组件开发

核心组件实现

  • 登录注册组件
  • 任务列表组件
  • 任务表单组件
  • 任务详情组件

// TaskList.vue
<template>
  <div class="task-list">
    <div v-for="task in tasks" :key="task.id">
      <task-item :task="task" @update="updateTask" />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import TaskItem from './TaskItem.vue'

export default defineComponent({
  components: { TaskItem },
  props: {
    tasks: {
      type: Array,
      required: true
    }
  },
  methods: {
    updateTask(task) {
      this.$emit('update', task)
    }
  }
})
</script>

4. 状态管理

Vuex配置

  • 状态模块划分
  • Actions和Mutations定义
  • Getters实现
  • 模块化状态管理

// store/tasks.js
export default {
  state: {
    tasks: [],
    loading: false,
    error: null
  },
  mutations: {
    SET_TASKS(state, tasks) {
      state.tasks = tasks
    },
    ADD_TASK(state, task) {
      state.tasks.push(task)
    }
  },
  actions: {
    async fetchTasks({ commit }) {
      try {
        const response = await api.getTasks()
        commit('SET_TASKS', response.data)
      } catch (error) {
        console.error(error)
      }
    }
  }
}

5. 路由配置

路由设计

  • 路由结构规划
  • 路由守卫实现
  • 懒加载配置
  • 404页面处理

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/tasks',
    component: () => import('@/views/Tasks.vue'),
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

6. API集成

后端接口对接

  • API请求封装
  • 错误处理
  • 请求拦截器
  • 响应拦截器

// api/index.js
import axios from 'axios'

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 5000
})

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error)
  }
)

7. 部署上线

部署流程

  • 生产环境构建
  • 性能优化
  • CI/CD配置
  • 监控和日志

# 构建生产版本
npm run build

# 部署到服务器
scp -r dist/* user@server:/var/www/html/

# 配置Nginx
server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

项目开发建议

  • 遵循Git工作流
  • 编写单元测试
  • 使用ESLint和Prettier
  • 定期代码审查

练习

尝试完成以下任务：

  • 实现任务搜索功能
  • 添加任务标签系统
  • 实现任务导出功能
  • 添加数据可视化