carrywu / vue3-zhiye Goto Github PK

This project forked from liangtiao4/vue3-zhiye

基于Vue3 、TypeScript 和 Node.js express 框架仿造知乎专栏——之也

JavaScript 0.97% TypeScript 22.31% CSS 5.03% HTML 1.18% Vue 70.52%

vue3-zhiye's Introduction

前言

此项目是 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 。

部分截图

登录页

首页

专栏

文章

目标功能

项目布局

│  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							// 注册页

Recommend Projects