我的前端学习之旅 - Day1: SwiftShare项目搭建

我的前端学习之旅 - Day1: SwiftShare项目搭建

项目背景

作为一个转行前端的新手，我制定了30天学习计划，目标是完成一个完整的视频分享平台项目。选择这个项目是因为它涵盖了前端开发的核心技术，同时结合了我的兴趣爱好，将对Taylor Swift的喜爱融入项目中，让学习过程变得更加有趣和有意义。

技术栈选择

• Vue3 - 最新的前端框架，组合式API更简洁
• Element Plus - 成熟的UI组件库，快速构建界面
• Vue Router - 路由管理，实现单页应用
• Vuex - 状态管理，管理全局数据
• Axios - 网络请求库，与后端API交互

项目特色

• 🎵 霉霉主题设计
• 💕 Swiftie社区元素
• 🚀 现代化技术栈
• 📱 响应式布局

详细步骤

1. 环境搭建

# 安装Node.js 16.16.0
# 安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create swift-share

2. 项目创建

选择配置：

• Vue 3
• Router
• Vuex
• ESLint + Prettier

3. 依赖安装

npm install element-plus @element-plus/icons-vue
npm install axios video.js echarts spark-md5

4. 基础配置

main.js配置

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
import router from './router'
import store from './store'
import './assets/css/base.css'

const app = createApp(App)

// 全局配置
app.config.globalProperties.$axios = axios
app.use(ElementPlus, { locale: zhCn })

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(store)
app.use(router)
app.mount('#app')

5. 网络请求工具

utils/request.js

import axios from 'axios'
import { ElMessage } from 'element-plus'

const request = axios.create({
    baseURL: process.env.VUE_APP_API_URL || 'http://localhost:8080/api',
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json'
    }
})

// 请求拦截器
request.interceptors.request.use(
    config => {
        console.log('发送请求:', config.method.toUpperCase(), config.url)
        
        const token = localStorage.getItem('token')
        if (token) {
            config.headers.Authorization = `Bearer ${token}`
        }
        
        return config
    },
    error => {
        console.error('请求错误:', error)
        return Promise.reject(error)
    }
)

// 响应拦截器
request.interceptors.response.use(
    response => {
        console.log('收到响应:', response.config.url, response.data)
        
        const { code, message, data } = response.data
        
        if (code === 200 || code === undefined) {
            return data || response.data
        } else {
            ElMessage.error(message || '请求失败')
            return Promise.reject(new Error(message || '请求失败'))
        }
    },
    error => {
        console.error('响应错误:', error)
        
        if (error.response) {
            const { status, data } = error.response
            
            switch (status) {
                case 401:
                    ElMessage.error('未授权，请重新登录')
                    localStorage.removeItem('token')
                    window.location.href = '/login'
                    break
                case 403:
                    ElMessage.error('权限不足')
                    break
                case 404:
                    ElMessage.error('请求的资源不存在')
                    break
                case 500:
                    ElMessage.error('服务器内部错误')
                    break
                default:
                    ElMessage.error(data.message || '请求失败')
            }
        } else if (error.request) {
            ElMessage.error('网络错误，请检查网络连接')
        } else {
            ElMessage.error('请求配置错误')
        }
        
        return Promise.reject(error)
    }
)

export default request

6. API模块设计

api/user.js

import request from '@/utils/request'

export const userApi = {
    // 用户登录
    login(data) {
        return request({
            url: '/user/login',
            method: 'post',
            data
        })
    },
    
    // 用户注册
    register(data) {
        return request({
            url: '/user/register',
            method: 'post',
            data
        })
    },
    
    // 获取用户信息
    getUserInfo() {
        return request({
            url: '/user/info',
            method: 'get'
        })
    },
    
    // 更新用户信息
    updateUserInfo(data) {
        return request({
            url: '/user/info',
            method: 'put',
            data
        })
    }
}

7. GitHub部署

# 初始化Git仓库
git init

# 配置用户信息
git config --global user.email "your-email@example.com"
git config --global user.name "Your Name"

# 提交代码
git add .
git commit -m "Day1: SwiftShare项目初始化和基础配置"

# 推送到GitHub
git remote add origin https://github.com/your-username/swift-share.git
git branch -M main
git push -u origin main

遇到的问题和解决方案

1. Node.js版本兼容性

问题： 使用Node.js v22.17.0，某些包不兼容 解决： 忽略警告，项目能正常运行

2. ESLint规则配置

问题： 组件名必须是多词 解决： 暂时禁用规则，专注于功能开发

3. Git用户信息设置

问题： 首次提交需要配置用户信息 解决： 设置全局用户名和邮箱

学习心得

1. 学习策略

• 先复制再理解：不要因为不懂语法而停滞
• 实践为主：多动手，少空想
• 遇到问题就问：不要卡在一个地方太久

2. 技术收获

• 掌握了Vue3项目创建流程
• 理解了Element Plus的配置
• 学会了Axios的封装
• 了解了Git版本控制

3. 项目经验

• 项目结构设计的重要性
• 模块化开发的好处
• 错误处理的重要性
• 文档记录的必要性

项目截图

明日计划

Day2: 路由配置和基础布局

• 完善路由系统
• 创建基础布局组件
• 实现导航栏
• 添加页面组件

总结

Day1的学习让我对前端开发有了更清晰的认识。虽然还有很多不懂的地方，但通过实践，我逐渐理解了项目的整体架构和开发流程。

关键收获：

• 技术栈的选择和配置
• 项目结构的组织
• 开发工具的使用
• 问题解决的方法

期待Day2的学习！

---

GitHub地址： github.com/EveKoo/swif…

技术标签： #Vue3 #Element Plus #前端开发 #学习记录 #SwiftShare