aermin / Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Home
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+184.77%)
Mutual labels: webpack, axios, vuex, scss, vuejs2, vue-router, vue2
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (-2.73%)
Mutual labels: webpack, axios, vuex, scss, vuejs2, vue-router, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+709.38%)
Mutual labels: webpack, vue-cli, vuex, vuejs2, vue-router, vue2
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+94.14%)
Mutual labels: webpack, vue-cli, vuex, vuejs2, vue-router, vue2
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目，一个PC端页面入口，一个移动端页面入口，且有各自的路由， vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-43.36%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router, vue2
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+162.89%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router
Vue2 blog
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + express + pm2 + webpack+nginx构建的具有登录，注册，留言，用户发帖，用户评论等功能的SPA Blog。注意，注意，注意，后端API全部自己手写，很适合刚学习vue以及express的小伙伴学习，喜欢请Star鼓励一下我，谢谢！项目预览：
Stars: ✭ 417 (+62.89%)
Mutual labels: webpack, vue-cli, axios, vuex, vue2
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-93.75%)
Mutual labels: webpack, axios, vuex, vue-router, vue2
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+408.59%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+17.58%)
Mutual labels: webpack, axios, vuex, vuejs2, vue-router
Manhuaren
vue2.0全家桶，仿漫画人官网（移动端）
Stars: ✭ 18 (-92.97%)
Mutual labels: webpack, vue-cli, vuex, vuejs2, vue-router
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+414.06%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router
Vue Todos
vue最新实战项目教程，从零开始，一步一个脚印,循序渐进。跟着我一起学习vue吧！
Stars: ✭ 1,659 (+548.05%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router
Vue Cnode
🚀 基于vue3 function-based 构建cnode社区
Stars: ✭ 192 (-25%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router
Vue Blog
🎉 基于vue全家桶 + element-ui 构建的一个后台管理集成解决方案
Stars: ✭ 208 (-18.75%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (-12.89%)
Mutual labels: vue-cli, vuex, vuejs2, vue-router, vue2
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (+8.98%)
Mutual labels: webpack, vue-cli, axios, vuex, vue-router
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+426.95%)
Mutual labels: webpack, axios, vuex, vue-router, vue2
Github Ranking
🔍GitHub不同语言热门项目排行，Vue.js做页面展示
Stars: ✭ 160 (-37.5%)
Mutual labels: webpack, vue-cli, axios, vuejs2, vue2
点击加入vue-home的项目聊天群
vue-home
技术点
用vue社区提供的API，基于vue+vue-cli+vue-router+axios+webpack开发的vue社区 SPA
UI用Muse-UI,css用scss，rem做移动端适配
建议先去社区注册拿accesstoken登录体验(注册可以直接用github账号，挺快的)
手机扫描查看效果
完成功能
- [x] 首页列表
- [x] 下拉加载
- [x] 用户信息（点击头像）
- [x] 主题内容
- [x] 登录功能
- [x] 收藏（取消收藏）主题
- [x] 评论列表
- [x] 点赞（取消点赞）功能
- [x] 消息中心（已读、未读）
- [x] 个人中心
- [x] 发表评论
- [x] 回复评论
- [x] 发布主题（支持markdown编辑且可预览）
安装运行
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
- 注意
npm run dev之后 默认浏览器打开的是http://localhost:8080 请换成http://localhost:8080/vue-home/dist
准备开发环境
- $ cd vue-home
- $ npm install
- $ npm run dev
等写完项目后 打包上线
- $ npm run build
项目结构
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── dist //等写完项目后 $ npm run build 的打包文件
│ ├── index.html
│ └── static
├── index.html //首页入口文件
├── node_modules
├── package.json
├── src
│ ├── App.vue //项目入口文件
│ ├── assets
│ │ ├── 1495982696.png //手机扫描二维码
│ │ ├── logo.png //vue logo
│ │ └── sass //sass通用样式
│ ├── components //组件
│ │ ├── FooterNav.vue //底部nav组件
│ │ ├── HeaderBar.vue //顶部横条
│ │ ├── HeaderTabs.vue //顶部tabs组件&主页面内容拉取
│ │ └── Hello.vue
│ ├── main.js //核心文件 在这里引入了Muse UI 时间过滤器
│ ├── pages //页面
│ │ ├── content.vue //帖子内容页面
│ │ ├── index.vue //首页
│ │ ├── login.vue //登录页面
│ │ ├── message.vue //信息通知页面
│ │ ├── more.vue
│ │ ├── my.vue //个人信息页面
│ │ ├── people.vue //社区用户信息页面
│ │ └── publish.vue //发布帖子页面
│ ├── router //路由与组件配置
│ │ └── index.js
│ └── util //时间过滤器，转换时间格式
│ └── filter.js
└── static
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].