从一个电影网站项目学习[前台显示端]—Vue.js

本篇文章通过一个完整的电影介绍和电影资源发布网站的项目,过一遍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
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?