seo推广seo技术培训,广州网站优化服务,凤岗镇做网站,交互网站 百度Day 1 开发文档#xff1a;项目初始化与基础架构搭建
一、项目初始化
1. 创建项目
首先#xff0c;我们使用 Vite 创建一个基于 Vue 3 的项目#xff1a;
# 创建项目
npm create vitelatest my-blog -- --template vue
# 这条命令会创建一个名为 my-blog 的新项目#…Day 1 开发文档项目初始化与基础架构搭建
一、项目初始化
1. 创建项目
首先我们使用 Vite 创建一个基于 Vue 3 的项目
# 创建项目
npm create vitelatest my-blog -- --template vue
# 这条命令会创建一个名为 my-blog 的新项目使用 Vue 3 模板# 进入项目目录
cd my-blog# 安装项目依赖
npm install2. 安装必要依赖
接下来我们需要安装项目所需的核心依赖
# 安装核心依赖
npm install vue-router4 vuex4 axios marked dompurify
# vue-router4: Vue 3 的路由管理器用于处理页面导航
# vuex4: Vue 3 的状态管理库用于管理全局状态
# axios: HTTP 请求库用于与后端 API 通信
# marked: Markdown 解析器用于解析文章内容
# dompurify: HTML 净化库用于防止 XSS 攻击# 安装开发依赖
npm install -D sass types/node
# sass: CSS 预处理器提供更强大的样式编写功能
# types/node: Node.js 的 TypeScript 类型定义3. 项目结构规划
创建以下目录结构每个目录都有其特定用途
blog-website/
├── src/
│ ├── components/ # 公共组件目录
│ │ ├── TheHeader.vue # 网站头部导航
│ │ ├── ScrollProgress.vue # 滚动进度条
│ │ ├── BlogCard.vue # 博客卡片
│ │ └── TheFooter.vue # 网站底部
│ ├── views/ # 页面组件目录
│ │ ├── HomeView.vue # 首页
│ │ └── BlogView.vue # 博客列表页
│ ├── router/ # 路由配置目录
│ │ └── index.js # 路由配置文件
│ ├── store/ # 状态管理目录
│ │ └── index.js # Vuex 配置文件
│ ├── api/ # API 接口目录
│ │ └── blog.js # 博客相关接口
│ └── assets/ # 静态资源目录
│ └── styles/ # 样式文件目录
│ ├── main.css # 主样式文件
│ └── responsive.css # 响应式样式
├── index.html # 入口 HTML 文件
└── package.json # 项目配置文件二、基础组件开发
1. 响应式导航栏组件
[文件位置: src/components/TheHeader.vue]
TheHeader.vue 组件说明
1. 功能实现响应式导航栏
2. 主要特点- 自适应布局在不同屏幕尺寸下自动调整显方式- 移动端菜单在小屏幕设备上显示汉堡菜单按钮- 动态交互菜单展开/收起动画滚动时自动隐藏/显示
3. 核心实现- 使用 Vue 3 组合式 API- 响应式状态管理- CSS 过渡动画templateheader classheader :class{ header-hidden: isHeaderHidden }div classcontainernav classnav!-- Logo 区域 --router-link to/ classlogoh1✨ My Blog ✨/h1/router-link!-- 移动端菜单按钮 --div classmenu-toggle clicktoggleMenui classfas fa-bars/i/div!-- 导航链接 --ul classnav-links :class{ active: isMenuOpen }li v-foritem in menuItems :keyitem.pathrouter-link :toitem.path clickcloseMenuactive-classactivei :classitem.icon/i{{ item.name }}/router-link/li/ul/nav/div/header
/templatescript setup
import { ref } from vue// 控制菜单显示状态
const isMenuOpen ref(false)
// 控制导航栏显示/隐藏
const isHeaderHidden ref(false)// 导航菜单项配置
const menuItems [{ path: /, name: 首页, icon: fas fa-home },{ path: /blog, name: 博客, icon: fas fa-cloud }
]// 切换菜单显示状态
const toggleMenu () {isMenuOpen.value !isMenuOpen.value
}// 关闭菜单
const closeMenu () {isMenuOpen.value false
}
/script2. 滚动进度条组件
[文件位置: src/components/ScrollProgress.vue]
ScrollProgress.vue 组件说明
1. 功能显示页面阅读进度
2. 主要特点- 实时进度更新随页面滚动实时计算和显示进度- 平滑动画使用 CSS 过渡实现流畅的进度更新- 性能优化使用节流函数优化滚动事件处理
3. 核心实现- 滚动事件监听- 进度计算逻辑- 组件生命周期管理templatediv classscroll-progress :style{ width: progress % }/div
/templatescript setup
import { ref, onMounted, onUnmounted } from vue// 存储滚动进度
const progress ref(0)// 更新滚动进度
const updateProgress () {// 计算页面总高度减去视口高度const windowHeight document.documentElement.scrollHeight - window.innerHeight// 计算滚动百分比const scrolled (window.scrollY / windowHeight) * 100progress.value scrolled
}// 组件挂载时添加滚动监听
onMounted(() {window.addEventListener(scroll, updateProgress)
})// 组件卸载时移除监听防止内存泄漏
onUnmounted(() {window.removeEventListener(scroll, updateProgress)
})
/script3. 博客卡片组件
[文件位置: src/components/BlogCard.vue]
BlogCard.vue 组件说明
1. 功能展示博客文章预览卡片
2. 主要特点- 响应式布局适应不同屏幕尺寸- 图片处理懒加载和错误处理- 内容格式化日期和摘要的智能处理
3. 核心实现- 图片懒加载- Markdown 解析- XSS 防护- 路由导航templatediv classblog-card clickhandleClick!-- 文章封面图片 --div classcard-imageimg :srcpost.image || /images/placeholder.jpg :altpost.titleerrorhandleImageError/div!-- 文章内容预览 --div classcard-contenth3 classcard-title{{ post.title }}/h3p classcard-excerpt{{ formatExcerpt(post.excerpt) }}/p!-- 文章元信息 --div classcard-metaspan classdatei classfar fa-calendar-alt/i{{ formatDate(post.date) }}/spanspan classcategoryi classfas fa-folder/i{{ post.category }}/span/div/div/div
/templatescript setup
import { ref } from vue
import { marked } from marked
import DOMPurify from dompurify
import { useRouter } from vue-router// 定义组件属性
const props defineProps({post: {type: Object,required: true}
})const router useRouter()// 处理卡片点击跳转到文章详情
const handleClick () {const id props.post?.idif (!id) returnrouter.push(/blog/${id})
}// 格式化文章摘要去除 HTML 标签限制长度
const formatExcerpt (excerpt) {if (!excerpt) return const html DOMPurify.sanitize(marked(excerpt))const div document.createElement(div)div.innerHTML htmllet text div.textContent || div.innerText || return text.length 200 ? text.slice(0, 200) ... : text
}// 格式化日期显示
const formatDate (date) {return new Date(date).toLocaleDateString(zh-CN)
}// 处理图片加载失败
const handleImageError (e) {e.target.src /images/placeholder.jpg
}
/script三、路由配置
1. 基础路由设置
[文件位置: src/router/index.js]
配置页面路由和导航规则
import { createRouter, createWebHistory } from vue-router
import HomeView from /views/HomeView.vue
import BlogView from /views/BlogView.vueconst routes [{path: /,name: home,component: HomeView,meta: {title: 首页}},{path: /blog,name: blog,component: BlogView,meta: {title: 博客}}
]const router createRouter({history: createWebHistory(),routes,scrollBehavior(to, from, savedPosition) {// 页面切换时滚动到顶部return { top: 0 }}
})export default router路由配置说明
1. 功能实现页面导航和路由控制
2. 主要特点- 历史模式使用 HTML5 History API- 路由懒加载优化首屏加载时间- 滚动行为自动滚动到页面顶部
3. 核心实现- 路由注册- 导航守卫- 滚动控制3. 懒加载优化
[文件位置: src/router/index.js, src/components/BlogCard.vue, src/App.vue]
为了提升性能我们在以下几个方面实现了懒加载
路由懒加载
// [文件位置: src/router/index.js]
const routes [{path: /,name: home,component: () import(/views/HomeView.vue) // 懒加载首页},{path: /blog,name: blog,component: () import(/views/BlogView.vue) // 懒加载博客页}
]图片懒加载
// [文件位置: src/components/BlogCard.vue]
templatediv classblog-carddiv classcard-imageimg :srcpost.image || /images/placeholder.jpg :altpost.titleloadinglazy // 使用浏览器原生懒加载errorhandleImageError/div/div
/template组件懒加载
// [文件位置: src/App.vue]
script setup
import { defineAsyncComponent } from vue// 懒加载非关键组件
const TheFooter defineAsyncComponent(() import(./components/TheFooter.vue)
)// 带加载状态的懒加载组件
const BlogEditor defineAsyncComponent({loader: () import(./components/BlogEditor.vue),loadingComponent: LoadingSpinner,delay: 200,timeout: 3000
})
/script懒加载效果
首屏加载时间优化只加载必要的组件图片加载优化减少首屏请求数量路由切换优化按需加载页面组件内存使用优化减少初始化时的内存占用
四、状态管理
1. Vuex Store 配置
[文件位置: src/store/index.js]
配置全局状态管理
import { createStore } from vuex
import { blogApi } from /api/blogexport default createStore({// 状态定义state: {posts: [], // 文章列表loading: false, // 加载状态error: null // 错误信息},// 修改状态的方法mutations: {SET_POSTS(state, posts) {state.posts posts},SET_LOADING(state, loading) {state.loading loading},SET_ERROR(state, error) {state.error error}},// 异步操作actions: {// 获取文章列表async fetchPosts({ commit }) {try {commit(SET_LOADING, true)const { data } await blogApi.getPosts()commit(SET_POSTS, data)return data} catch (err) {commit(SET_ERROR, err.message)throw err} finally {commit(SET_LOADING, false)}}}
})Vuex Store 配置说明
1. 功能全局状态管理
2. 主要特点- 集中管理数据- 异步操作处理- 状态追踪
3. 核心实现- 状态定义- 同步修改- 异步操作五、样式系统
1. 全局主题变量
[文件位置: src/assets/styles/main.css]
定义全局样式变量确保设计的一致性
:root {/* 颜色系统 - 定义网站配色方案 */--color-primary: #3498db; /* 主要颜色 */--color-secondary: #2ecc71; /* 次要颜色 */--color-text: #2c3e50; /* 文本颜色 */--color-background: #ffffff; /* 背景颜色 */--color-border: #e0e0e0; /* 边框颜色 *//* 字体系统 - 定义文字样式 */--font-family: Inter, system-ui, sans-serif;--font-size-base: 16px; /* 基础字号 */--font-size-lg: 18px; /* 大号字体 */--font-size-xl: 24px; /* 特大号字体 *//* 间距系统 - 统一间距标准 */--spacing-xs: 4px; /* 超小间距 */--spacing-sm: 8px; /* 小间距 */--spacing-md: 16px; /* 中等间距 */--spacing-lg: 24px; /* 大间距 */--spacing-xl: 32px; /* 特大间距 *//* 圆角 - 统一圆角大小 */--border-radius: 8px;--border-radius-lg: 12px;/* 阴影 - 统一阴影效果 */--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);--shadow-md: 0 4px 6px rgba(0,0,0,0.1);--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}2. 响应式布局
[文件位置: src/assets/styles/responsive.css]
实现移动端优先的响应式设计
/* 移动端优先的响应式设计 */
.container {width: 100%;padding: 0 var(--spacing-md);margin: 0 auto;
}/* 平板设备断点 ( 768px) */
media (min-width: 768px) {.container {max-width: 720px; /* 限制容器最大宽度 */}.header__nav {display: flex; /* 显示导航菜单 */}.header__toggle {display: none; /* 隐藏菜单按钮 */}
}/* 桌面设备断点 ( 1024px) */
media (min-width: 1024px) {.container {max-width: 960px;}.posts-grid {grid-template-columns: repeat(3, 1fr); /* 三列布局 */}
}/* 大屏设备断点 ( 1280px) */
media (min-width: 1280px) {.container {max-width: 1200px;}
}样式系统说明
1. 功能统一的设计系统
2. 主要特点- 主题变量统一的颜色和尺寸- 响应式设计适配不同设备- 组件样式模块化的样式管理
3. 核心实现- CSS 变量系统- 媒体查询- 布局系统六、第一天完成的功能 项目初始化 使用 Vite 创建 Vue 3 项目安装必要的依赖包规划项目目录结构 基础组件开发 响应式导航栏TheHeader 网站标题和 Logo响应式菜单移动端适配 滚动进度条ScrollProgress 实时显示阅读进度平滑动画效果 博客卡片BlogCard 文章预览展示图片加载优化响应式布局 路由配置 设置基础路由首页、博客列表配置路由历史模式添加滚动行为控制 状态管理 配置 Vuex store实现文章数据管理添加加载状态控制 样式系统 定义全局主题变量实现响应式布局设置统一的设计标准
