前言

这个 DEMO 是我参考网上用 VUE 开发豆瓣的文章练习的，目前只开发了个首页 + 底部导航，以后有时间再补充吧（本人工作不用 Quasar, 纯兴趣爱好）。Github 地址：https://github.com/mingzai/quasar-douban-demo。大家也可以共同把这个 DEMO 做好。

效果图

DEMO 简易说明

前提

1. 得有 git 客户端。没有 git 客户端的，下载并安装 git 客户端

2. 你得熟悉 Vue， 不然一些 Vue 语法都看不懂。如果不熟，可以参考Vue 入门实战教程

步骤

获得 demo 源码并运行 DEMO

进入一个目录 ，使用 git bash 中输入git clone https://github.com/mingzai/quasar-douban-demo在当前目录得到 quasar-douban-demo 项目的源码。

进入 quasar-douban-demo 项目，命令行运行 cnpm install、quasar dev 启动项目。

在新项目上开发并运行 DEMO

你可以将 DEMO 里面的代码慢慢转移到新创建的项目上，以体验如何在新的项目基础上进行开发。

创建一个新的 Quasar 项目

首先，根据quasar framework 简易入门里面创建一个新的 quasar-demo。

添加启动文件

1. 引入 axios 和 vue-i18n 两个依赖包：

"dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.18.1",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "vue-i18n": "^8.0.0"
  },

2. 将 demo 源码以下文件复制到 quasar-demo 的对应目录中：

src/boot/axios.js( 使用 axios 进行 AJAX 请求）

src/boot/i18n.js( 使用 vue-i18n 实现国际化）

src/i18n( 国际化资源文件夹）

3. 在项目根目录 quasar.conf 文件的 boot 结点添加：

boot: [
      'i18n',
      'axios'
    ]

准备本地数据接口

1. 将 demo 源码以下文件复制到 quasar-demo 的对应目录中：

src/data( 列表数据）

2. 在项目根目录 quasar.conf 文件的 devServer 结点添加 before：

devServer: {
      https: false,
      port: 8080,
      open: true, // opens browser window automatically
      before: function (app, server, compiler) {
        var express = require('express')
        var homeData = require('./src/data/homeData.json')
        var apiRoutes = express.Router()
        apiRoutes.get('/homeData', function (req, res) {
          res.json({
            errno: 0,
            data: homeData
          })
        })
        app.use('/api', apiRoutes)
      }

这样就可以向 /api/homeData 发送 AJAX 请求获取数据了

创建布局和页面文件

将 demo 源码以下文件覆盖到 quasar-demo 的对应目录中：

src/assets/sad.svg（404 页面图片）

src/layouts(布局文件, 使用 Quasar Framework 中文网右上角里面”工具“中的”布局生成器“创建布局文件)

src/pages(5 个主页面和 404 页面)

更改路由

更改 router 中的 routes.js，创建如下路由

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: 'book', component: () => import('pages/Book.vue') },
      { path: 'radio', component: () => import('pages/Radio.vue') },
      { path: 'group', component: () => import('pages/Group.vue') },
      { path: 'mine', component: () => import('pages/Mine.vue') }
    ]
  }
]

启动

运行 yarn、quasar dev 启动看看吧！