eastwood1986 / vue-douban

A Vue.js project

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue-douban

A Vue.js project

技术栈

vue + vuex + vue-router + axios + webpack + ES6

文章地址

项目运行

如何运行

运行前请先确认电脑上已经安装好node环境

  • 克隆项目到本地
git clone https://github.com/nh0007/vue-douban.git
  • 进入项目根目录,在命令行运行语句安装依赖:
npm install
  • 运行项目
npm run dev
  • 等待运行完毕后,在浏览器输入命令行提示地址,可看到项目效果。

代码结构

├── assets  //图片资源
├── components  // 项目组件
│   ├── book  //图书组件
│       ├── BookTag.vue
│       ├── BookTagContent.vue
│       ├── BookTagMoreContent.vue
│       └── BookTypeContent.vue
│   ├── city  //同城活动组件
│       ├── CityActivityContent.vue
│       ├── CityActivityContentItem.vue
│       └── CityTag.vue
│   ├── common  //公用组件
│       ├── BaseHeader.vue
│       ├── BaseModal.vue
│       └── BaseSlide.vue
│   ├── movie  //电影组件
│       ├── MovieTag.vue
│       ├── MovieTagContent.vue
│       └── MovieTimeTypeContent.vue
│   ├── music  //音乐组件
│       └── MusicTagContent.vue
├── css  // 公用的CSS样式
│   └── style.css
├── router  // 前端路由配置
│   └── index.js
├── store  // vuex数据管理
│   ├── module  // 子模块数据
│       ├── book.js
│       ├── city.js
│       ├── movie.js
│       └── music.js
│   ├── index.js
│   └── mutation-types.js
├── util  // 公用的js函数
│   └── util.js
├── App.vue // 根组件
└── main.js  // 入口文件

项目截图

读书页: bookTagContent

bookTagMoreContent

bookTypeContent

电影页: movieTagContent

movieTypeContent

音乐页: musicContent

同城活动页: cityContent

搜索页: search

结语

由于工作中使用的框架并不是vue,对vue的了解也并不深入,如果项目中有出现啥问题或者更加好的实现,欢迎issue。另外,欢迎star哦。

About

A Vue.js project


Languages

Language:Vue 55.4%Language:JavaScript 42.7%Language:CSS 1.6%Language:HTML 0.3%