★ FEATURED ARTICLE 1. 项目概述与背景最近在B站看到小霖同学的Quasar框架教程决定跟着学习一下这个基于Vue3的前端框架。Quasar作为一个全能的Vue框架提供了丰富的UI组件和开发工具特别适合快速构建响应式Web应用。本文将记录我从零开始搭建一个博客管理前端页面的完整过程包括环境配置、项目初始化、前后端连接、组件开发等关键环节。这个项目的主要目标是实现一个简单的博客管理系统前端能够展示博客列表并与GoFrame后端进行数据交互。过程中会涉及Quasar的核心功能使用如路由配置、Axios封装、表格组件等也会分享一些实际开发中遇到的问题和解决方案。2. 环境准备与项目初始化2.1 Node.js环境配置首先需要确保Node.js环境正确配置。我推荐使用nvm(Node Version Manager)来管理Node版本这样可以灵活切换不同项目所需的Node版本nvm install v24.12.0 # 安装指定版本 nvm alias default v24.12.0 # 设置为默认版本 nvm use default # 使用默认版本注意Quasar对Node版本有一定要求太老的版本可能会导致兼容性问题。v24.12.0是一个长期支持版本(LTS)稳定性有保障。2.2 创建Quasar项目在合适的目录下使用以下命令初始化Quasar项目npm init quasar初始化过程中需要回答一些配置问题我的选择如下项目类型选择App with Quasar CLI项目名称输入自定义项目名(如blog-admin)包管理器选择npm或yarnVue选项选择Vue 3额外功能勾选Pinia(状态管理)、Axios(HTTP请求)、i18n(国际化)和ESLint(代码检查)脚本语言选择JavaScript(而非TypeScript)提示Quasar默认使用Vite作为构建工具而非Webpack。两者在配置文件格式上有差异需要注意区分。Vite的优势在于极快的启动速度和热更新。2.3 项目结构解析项目初始化完成后主要目录结构如下src/ ├── api/ # API请求封装 ├── assets/ # 静态资源 ├── boot/ # 启动文件(如axios初始化) ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── css/ # 全局样式 ├── layouts/ # 布局模板 ├── pages/ # 页面组件 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 └── App.vue # 根组件关键文件说明src/router/routes.js定义应用路由src/layouts/MainLayout.vue主布局模板src/pages/IndexPage.vue首页组件2.4 启动开发服务器进入项目目录并启动开发服务器cd blog-admin npx quasar dev执行后会启动本地开发服务器并自动在浏览器中打开应用。默认页面展示了Quasar的基本信息和一些示例组件。3. 前后端连接配置3.1 代理配置解决跨域问题开发环境下前端运行在localhost:3000后端API可能在localhost:8000这会导致跨域问题。Quasar提供了便捷的代理配置方案修改quasar.config.jsbuild: { env: { apiBaseUrl: ctx.dev ? /api : http://localhost:8000, }, devServer: { proxy: { /api: { target: http://localhost:8000, // 后端API地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ), }, }, }, }重要说明这里使用相对路径/api而非绝对路径http://...是因为开发服务器只会捕获并代理匹配的请求。添加/api前缀并在代理规则中去掉它可以简化配置。3.2 Axios实例配置在src/boot/axios.js中配置Axios实例const api axios.create({ baseURL: process.env.apiBaseUrl, timeout: 30000, // 30秒超时 })这样创建的api实例会自动根据环境使用不同的baseURL开发环境使用代理的/api生产环境直接连接后端服务器。4. API请求封装4.1 博客相关API封装参考GoFrame后端的API设计我们创建src/api/post.js来封装博客相关的请求import { api } from boot/axios const post { // 获取博客列表 index: async function(params) { try { const response await api.get(/post/index, { params }) return response.data } catch (error) { handleApiError(error) } }, // 创建博客 create: async function(params) { try { const response await api.post(/post/create, params) return response.data } catch (error) { handleApiError(error) } }, // 更新博客 update: async function(id, params) { try { const response await api.post(/post/update/${id}, params) return response.data } catch (error) { handleApiError(error) } }, // 查看博客详情 view: async function(id) { try { const response await api.get(/post/view/${id}) return response.data } catch (error) { handleApiError(error) } }, // 删除博客 delete: async function(id) { try { const response await api.post(/post/delete/${id}) return response.data } catch (error) { handleApiError(error) } } } // 统一错误处理 function handleApiError(error) { if (error.response) { console.error(API Error:, error.response.data) console.error(Status:, error.response.status) } else if (error.request) { console.error(No response received:, error.request) } else { console.error(Request error:, error.message) } throw error // 继续抛出错误以便组件处理 } export { post }技巧使用async/await语法使异步代码更易读同时统一错误处理可以减少重复代码。Axios的错误分为几种情况服务器响应了错误状态码、请求已发送但无响应、请求配置错误等需要分别处理。5. 博客列表页面开发5.1 创建PostPage组件在src/pages/PostPage.vue中创建博客列表页面template q-page classflex flex-center div classq-pa-md stylewidth: 100% q-table title博客列表 :columnscolumns :rowsrows row-keyid :paginationpagination requestonRequest template v-slot:top-right q-btn colorprimary label新增博客 clickonCreate / /template /q-table /div /q-page /template script setup import { post } from src/api/post import { ref, onMounted } from vue // 表格列定义 const columns [ { name: id, label: ID, field: id, align: left }, { name: title, label: 标题, field: title }, { name: content, label: 内容, field: content, format: val val ? val.substring(0, 20) ... : }, { name: tags, label: 标签, field: tags }, { name: status, label: 状态, field: status }, { name: createdAt, label: 创建时间, field: createdAt, sortable: true }, { name: updatedAt, label: 更新时间, field: updatedAt }, { name: authorId, label: 作者ID, field: authorId }, { name: actions, label: 操作, field: , align: center } ] // 表格数据 const rows ref([]) const pagination ref({ page: 1, rowsPerPage: 10, rowsNumber: 0 }) // 加载数据 const fetchData async (props {}) { const { page, rowsPerPage, sortBy, descending } props.pagination || pagination.value const params { page, size: rowsPerPage, sort: sortBy ? ${sortBy}${descending ? desc : } : undefined } try { const res await post.index(params) rows.value res.data.list pagination.value.rowsNumber res.data.total pagination.value.page page pagination.value.rowsPerPage rowsPerPage } catch (error) { console.error(加载博客列表失败:, error) } } // 表格分页/排序请求 const onRequest (props) { fetchData(props) } // 新增博客 const onCreate () { // 跳转到创建页面或打开对话框 console.log(跳转到创建页面) } // 初始化加载 onMounted(() { fetchData() }) /script5.2 关键功能解析QTable组件Quasar提供了功能丰富的表格组件支持分页、排序、自定义模板等功能。我们通过:columns定义表头:rows绑定数据。分页处理通过pagination对象控制分页状态request事件在用户切换页码或排序时触发重新加载数据。数据加载fetchData方法封装了数据获取逻辑接收分页和排序参数调用API获取数据后更新表格。响应式数据使用Vue3的ref创建响应式变量当数据变化时视图会自动更新。5.3 路由配置在src/router/routes.js中添加博客页面的路由const routes [ { path: /, component: () import(layouts/MainLayout.vue), children: [ { path: , component: () import(pages/IndexPage.vue) }, { path: post, component: () import(pages/PostPage.vue) }, // 其他路由... ] } ]然后在src/layouts/MainLayout.vue的导航菜单中添加博客页面链接const linksList [ { title: 博客, caption: 博客管理, icon: article, link: /post }, // 其他菜单项... ]6. 国际化配置Quasar默认使用英文我们可以通过简单配置改为中文修改quasar.config.jsframework: { config: {}, lang: zh-CN }Quasar内置了多种语言的翻译设置lang: zh-CN后所有组件的默认文本(如表格的分页信息)都会显示为中文。提示如果需要更复杂的国际化需求可以参考Quasar的App Internationalization文档实现多语言切换功能。7. Quasar组件概览Quasar提供了丰富的UI组件以下是一些常用组件的简要介绍7.1 布局与容器组件QPage页面容器提供基本的页面布局QCard卡片组件用于信息分组展示QTable功能强大的数据表格支持分页、排序、筛选等QTabs/QTabPanels选项卡组件用于组织内容7.2 表单组件QInput文本输入框QSelect下拉选择框QCheckbox/QRadio复选框/单选框QDate/QTime日期/时间选择器QUploader文件上传组件7.3 功能组件QDialog对话框组件QNotify通知提示QSpinner加载指示器QBtn按钮组件支持多种样式和功能7.4 其他实用组件QEditor富文本编辑器QTree树形组件QTimeline时间线组件QInfiniteScroll无限滚动加载8. 常见问题与解决方案8.1 代理配置不生效问题现象前端请求没有走代理直接请求后端地址导致跨域错误。解决方案确保quasar.config.js中的代理配置正确确认API请求使用的是相对路径(如/api/xxx)而非绝对路径检查后端服务是否正常运行重启Quasar开发服务器使配置生效8.2 表格数据显示异常问题现象表格中某些列数据显示不正确或格式不符合预期。解决方案检查columns定义中的field属性是否与数据字段名匹配使用format函数对数据进行格式化处理对于嵌套数据可以使用函数式fieldfield: row row.user.name8.3 样式不符合预期问题现象组件样式与设计稿不一致或布局错乱。解决方案检查是否正确定义了Quasar的CSS类(如q-pa-md表示中等内边距)使用浏览器开发者工具检查元素样式确认没有全局样式覆盖了Quasar组件样式9. 后续优化方向状态管理引入Pinia管理应用状态如用户登录状态、全局配置等权限控制实现基于角色的页面访问权限控制表单验证增强表单验证功能提供更好的用户反馈性能优化实现懒加载、代码分割等优化手段主题定制根据品牌风格定制Quasar主题在实际开发中我发现Quasar框架的学习曲线相对平缓特别是对熟悉Vue的开发者来说。它的文档非常全面组件API设计也很一致大大提高了开发效率。通过这个项目我掌握了Quasar的核心用法也体会到了它一次编写多端运行的设计理念带来的便利。
阅读完成 · 觉得有帮助？
