Vue.js 仿豆瓣电影DEMO 学习笔记一

豆瓣电影的首页效果

Vue.js 仿豆瓣电影DEMO 学习笔记一_第1张图片
movie_1.png

豆瓣电影的列表页面

Vue.js 仿豆瓣电影DEMO 学习笔记一_第2张图片
movie_2.png

豆瓣电影的电影内页面效果

Vue.js 仿豆瓣电影DEMO 学习笔记一_第3张图片
movie_3.png

参照以上的三个页面,做出豆瓣电影的首页,列表页面以及电影的详细页面。

工具版本控制

vue @2.8.0
webpack @1.13.1

搭建初始化环境

  1. vue init webpack movie-dou
  2. cd movie-dou
  3. cnpm install
  4. cnpm run dev
  5. 启动之后的页面效果
Vue.js 仿豆瓣电影DEMO 学习笔记一_第4张图片
init_1.png
  1. 初始化的页面目录结果
Vue.js 仿豆瓣电影DEMO 学习笔记一_第5张图片
init_2.png

豆瓣电影首页


1.公用的头部

在 app.vue的文件中添加公用的代码,html 和 css代码








页面呈现的效果

header.png

你可能感兴趣的:(Vue.js 仿豆瓣电影DEMO 学习笔记一)