首页 > 其他分享 >从一个电影网站项目学习[前台显示端]—Vue.js

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

时间:2023-04-05 12:01:47浏览次数:53  
标签:npm vue resource 项目 js Vue 前台


本篇文章通过一个完整的电影介绍和电影资源发布网站的项目,过一遍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

标签:npm,vue,resource,项目,js,Vue,前台
From: https://blog.51cto.com/u_15967457/6170543

相关文章

  • js高级
    判断:typeof判断null、object、array的结果均是object,即判断返回均是对象类型,所以typeof是不能判断出null、object与array这三种数据类型的instanceof可以判断检测对象的具体类型,注意使用方法:要检测的对象 instanceof 相应对象类型 ,若要检测对象属于相应的对象类型,则......
  • js dom 类型判断
    Node对象中的nodeName获取指定节点的节点名称(返回的是大写字母表示的)Node对象中的nodeType获取指定节点的节点类型元素节点属性节点文本节点123Node对象中的nodeValue获取指定节点的值详情见官网:https://developer.mozilla.org/......
  • 用nvm管理nodejs版本
    1 nvmgithub下载地址:https://github.com/coreybutler/nvm-windows/releases,2 输入nvm-v或nvmv检查是否安装成功3.nvm的使用nvmoff//禁用node.js版本管理(不卸载任何东西)nvmon//启用node.js版本管理nvminstall<version......
  • springboot +vue2.x实现音乐网站
    1pom文件<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache......
  • 简单的CMakePresets.json解析 -- configurePresets
    ----CMake官方文档-----CMakeLists.txt是通用的c++项目管理文件,在不同的设备中,环境变量,编译器等都可能不同,将这些设置都交给CMakeLists.txt,并不是一个好办法。为了降低CMakeLists.txt的臃肿程度,简化其判断,可以针对不同设备,配置不同的CMakePresets.json.使得项目可以在......
  • JS实现自动倒计时30秒后按钮才可用
    WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码。那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用。应......
  • [!] CDN: trunk URL couldn‘t be downloaded: https://cdn.jsdelivr.net/cocoa/
    热烈欢迎,请直接点击!!!进入博主AppStore主页,下载使用各个作品!!!注:博主将坚持每月上线一个新app!!!清华CocoaPods镜像源:CocoaPods镜像使用帮助CocoaPods是一个Cocoa和CocoaTouch框架的依赖管理器,具体原理和Homebrew有点类似,都是从GitHub下载索引,然后根据索引下载依赖的源......
  • Vue进阶(四十七):面试必备:2023 Vue经典面试题总结(含答案)
    一、什么是MVVM?MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View代表UI组件,它负责将数据模型转化成UI展现出来,ViewModel是一个同步View和Model的对象。在MVVM架构下,View和Model之间并没......
  • 第三十八篇 vue - 最佳实践 - 性能优化
    概述Vue在大多数常见场景下性能都是很优秀的,通常不需要手动优化。然而,总会有一些具有挑战性的场景需要进行针对性的微调。在本节中,我们将讨论用Vue开发的应用在性能方面该注意些什么首先,让我们区分一下web应用性能的两个主要方面1、页面加载性能首次访问时,应......
  • 第三十九篇 vue - 最佳实践 - 安全
    报告漏洞虽然很少发现新的漏洞,但我们仍建议始终使用最新版本的Vue及其官方配套库,以确保你的应用尽可能地安全。首要规则:不要使用无法信赖的模板使用Vue时最基本的安全规则就是不要将无法信赖的内容作为你的组件模板。使用无法信赖的模板相当于允许任意的JavaScript在你......