本篇文章通过一个完整的电影介绍和电影资源发布网站的项目,过一遍Vue.js。
通过前面章节的介绍
http://www.shanhubei.com/tag/vue 或在本平台下的相关文章了解一下。(ps本人是通过工具编辑器编写,同步在多个平台上)
项目源码:
github:https://github.com/shanhubei/vue_movie_example
gitee:
https://gitee.com/shanhubei/vue_movie_example
从一个电影网站项目学习[前台显示端]
包含用户的操作、新闻的发布展示等功能。
现在正是开始编写项目。
建立电影网站Vue.js项目
1.使用Vue.js命令行工具创建新项目。使用以下命令进行Vue.js项目的初始化和安装。
vue init webpack book_view
2.在此处项目会提示是否自动安装vue-router组件,这里需要输入y后按回车键进行安装。其他安装的包可以默认选择。
3.进入该项目文件夹中,先使用npm install
命令进行安装,然后尝试使用npm run dev
命令运行程序。
4.此项目会极大地依赖后端的数据服务端,所以需要一些相关的请求包,安装vue.js网络请求模块vue-resource.
npm install vue-resource -save
5.安装后需要在routes\index.js中引入并注册该组件,代码如下:
import VueResource from 'vue-resource'
Vue.use(VueResource)
注意:跨域问题,Vue.js和Express提供了两种可以支持跨域的方式。1.Vue.js的vue-resource的jsonp()方式。2.另外方式需要更改Express编写的服务端代码,在app.js中配置。
前台路由页面编写
通过编写相应的component,引入相关的router路由。
启动
npm install
npm run dev