vue-ts-fiction

基于 Vue(2.6)+ Typescript + Vuex +Vue-Router + Axios + Vant UI + Scss + ES6 等开发一款小说 WebApp，UI 界面参考了移动版的起点中文网、flex 布局适配常见移动端。

前言

项目前端基于vue-cli升级为ts版，后台数据通过node简单爬取，所以对于数据格式定义也比较宽松。因此，前端使用ts定义数据类型比较鸡肋。目前大多数据使用any类型定义。后期会重新规划数据格式，在细化定义。

在线预览

目前只支持指定账号登录(没有使用数据库)，所以没有更新到服务器，需自己clone下来运行看效果。（本人对后端业务了解比较少，可能存在问题。后期会努力提升）

项目演示地址：仿小说网WebApp。(纯属个人练手，巩固知识，无其他用途)

项目源码地址：vue-ts-fiction。觉得还可以的话给个star 在这先谢谢了~

推荐使用手机访问，电脑在Chrome调试模式下效果更佳，开启调试模式的手机模式后，如果不能滚动，刷新一下页面即可。

更新

新增登录模块、文章收藏和点赞。由于没有使用数据库，数据都写入在本地文件，感觉很局限。后期会使用数据库，添加注册模块。

项目部分结构

|-- fiction
    |-- .env.development 开发环境变量
    |-- .env.production 生成环境变量
    |-- tsconfig.json
    |-- package.json
    |-- postcss.config.js
    |-- vue.config.js
    |-- src
        |-- interface //接口存放
            |-- base.ts
            |-- user.ts
        |-- App.vue
        |-- main.ts
        |-- assets
        |-- components
        |-- request 请求设置
        |-- router  路由
        |-- store
        |   |-- getter.ts
        |   |-- index.ts
        |   |-- module
        |       |-- common
        |       |-- rank
        |-- utils
        |   |-- navBar.ts
        |   |-- vw.css

预览

图片虽然压缩过了，但是几张加载一起还是有3MB左右，所以请耐心等待一下啦。感觉不错的可以去上面的地址体验一下呦~

TODO

1. 添加后台管理系统
2. 升级为vue3.0项目

最后

要是感兴趣的话，可以自行看代码，大部分内容还是比较简单的，有问题的话欢迎提出了一起讨论