此项目是 Vue + TypeScript + Bootstrap 仿造知乎专栏构建的(之也)项目,它的接口zhiye-api 是用 Node.js express 框架实现的,数据从MySQL数据库获取,具有真实的登录、注册、权限验证、专栏、文章等功能。
Vue3 + Vuex + vue-router + ES6 + TypeScript + Bootstrap4 + express + nodemon + MySQL
如果对您对此项目有兴趣,可以点 "Star" 支持一下 谢谢! ^_^
目前该项目尚未达到理想目标,将继续更新~
适合想要学习或刚学习完 Vue3 和 TypeScript,想找项目练手的小伙伴们
**注意:**由于项目涉及到 ES6 新特性,node 需要 6.0 以上版本 (本人用的是13.14.0)
git clone https://https://github.com/liangtiao4/vue3-zhiye.git
cd vue3-zhiye
npm install (安装node_modules依赖)
npm run serve (运行项目)
App running at: http://localhost:8080/
此项目的所有数据都是通过zheyi-api接口获取,接口传送地址。
启动该项目的命令为:npm run start.dev
。
登录页
首页
专栏
文章
- 登录(退出登录)、注册 -- 完成
- 权限验证(部分页面未登录不可见、token) -- 完成
- 首页 -- 完成
- 专栏列表、专栏详情 -- 完成
- 申请专栏 -- 未完成
- 文章列表、新建文章 -- 完成
- 文章详情、编辑文章 -- 未完成
- 专题 -- 未完成
- 上传图片/文件 -- 未完成
- 发现 -- 未完成
- 个人中心 -- 未完成
- 加载动画 -- 完成
- 轻提示(成功、失败、警告)-- 完成
│ package-lock.json // 包信息
│ package.json // 包管理
│ README.md // 说明文档
│ tsconfig.json // ts配置文件
│
├─effectDiagram // 项目效果图
│ 1.login.png // 登录页
│ 2.home-login.png // 首页(登录时)
│ 3.home-logout.png // 首页(未登录)
│ 4.column.png // 专栏
│ 5.colum-detail.png // 专栏详情
│ 6.create.png // 创建文章
│
├─public // 公共资源
│ index.html // 入口html文件
│ title_icon.png // 图标
│
└─src
│ App.vue // 页面入口
│ main.ts // 程序入口文件,加载各种公共组件
│ public.css // 公共样式
│ router.ts // 路由
│ shims-vue.d.ts // vue 兼容 ts 配置
│
├─components // 组件
│ ColumnList.vue // 专栏列表
│ Dropdown.vue // 下拉框
│ DropdownItem.vue // 下拉框子项目
│ GlobalFooter.vue // 全局底部
│ GlobalHeader.vue // 全局头部导航栏
│ HomeItem.vue // 首页项目
│ Loader.vue // 加载动画
│ PostList.vue // 文章列表
│ Toast.vue // 轻提示
│ TopicList.vue // 专题列表
│ UploadFile.vue // 图片/文件上传
│ ValidateForm.vue // 验证表单
│ ValidateInput.vue // 验证文本框/文本域
│
├─hooks // 钩子
│ useClickOutside.ts // 区域外点击
│ useCreateToast.ts // 生成轻提示
│
├─http
│ index.ts // http请求
│
├─store
│ index.ts // 状态管理
│ type.ts // 数据类型
│
├─utils // 工具
│ getCurrentTime.ts // 获取当前时间
│ validateRules.ts // 验证规则
│
└─views // 路由页面
Column.vue // 专栏页
ColumnDetail.vue // 专栏详情页
CreatePost.vue // 创建文章页
Home.vue // 首页
Login.vue // 登录页
Register.vue // 注册页