新手vue构建单页面应用实例代码

本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下

步骤:

1.使用vue-cli创建项目
2.使用vue-router实现单页路由
3.用vuex管理我们的数据流
4.使用vue-resource请求我们的node服务端
5.使用.vue文件进行组件化的开发

一、目录结构:

二、搭建项目

先安装 vue-cli: sudo npm install -g vue-cli

使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载依赖)

输入命令进入项目: cd my-project

安装依赖: npm install

npm i

开始运行: npm run dev (或输入http://localhost:8080),在热加载中运行我们的应用

它会去找到package.json的scripts对象,执行node bulid/dev-server.js

在这文件里,配置了Webpack,会让它去编译项目文件,并且运行服务器。

这些都准备好后,我们需要为我们的路由、XHR请求、数据管理下载三个库,我们可以从vue的官网中找到他们。另外我们使用bootstrap作为我的UI库:

npm i vue-resource vue-router vuex bootstrap --save

三、项目开始

初始化项目(main.js)

查看我们的应用文件,我们可以在src目录下找到App.vue和main.js文件中,我们引入Vue和App,且创建了一个vue的实例(因为在router这行引入了App组件router.start(App,'#app'))

import Vue from 'vue'
import App from './App'
import router from './router'

import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

index.html

<body>
  <div id="app"></div>
 </body>

App.vue

<template>
 <div id="app">
  <div class="row">
   <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header">
     <h2>Router Basic - 01</h2>
    </div>
   </div>
  </div>
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
     <ul class="list-group">
      <!--使用指令v-link进行导航-->
      <a class="list-group-item"><router-link to="/home">Home</router-link></a>
      <a class="list-group-item"><router-link to="/about">About</router-link></a>
      <a class="list-group-item"><router-link to="/contact">Contact</router-link></a>
     </ul>
    </div>
    <div class="col-xs-6">
     <div class="panel">
      <div class="panel-body">
       <!--用于渲染匹配的组件-->
       <router-view></router-view>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

src/components/Home.vue 作为我们的首页

<template id="contact">
 <div>
  <h1>Home</h1>
  <p>This is the tutorial about Contact.</p>
 </div>
</template>

<script>
export default {
 '/hello': 'Hello'
}
</script>

src/components/About.vue

<template id="about">
  <div>
    <h1>About</h1>
    <p>This is the tutorial about vue-router.</p>
  </div>
</template>
<script>
export default {
 '/about': 'About'
}
</script>

src/components/Contact.vue

<template id="contact">
  <div>
    <h1>Contact</h1>
    <p>This is the tutorial about Contact.</p>
  </div>
</template>

export default {
 '/contact': 'contact'
}
</script>

src/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Hello',
   component: Hello
  },
  {
   path: '/home',
   name: 'Home',
   component: Home
  },
  {
   path: '/about',
   name: 'About',
   component: About
  },
  {
   path: '/contact',
   name: '/Contact',
   component: Contact
  }
 ]
})

spa地址:https://github.com/cinderellastory415/vue-demo/tree/master/spa

详细操作:

git clone https://github.com/cinderellastory415/vue-demo/tree/master/spa

npm install

npm run dev

输入以上命令,即可查看效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • vue.js单页面应用实例的简单实现

    一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入

  • 详解Vue使用命令行搭建单页面应用

    使用命令行搭建单页面应用 我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一. 下载工具 node, git 的下载大家可以去官网自行下载就可以了. 下面说一说安装 npm,npm 是在以上两个都安装的情况下才可以的. 国内直接 git npm 非常慢,所以我们到 taobao 的 npm 镜像下面去下载安装 镜像地址>> 打开安装好的 git bash 1 . 在 Git Bash 输入镜像的地址: 下载成功后,输入 cnpm -v

  • vue构建单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验. 2. 为什么选择 vue? 在选择 vue 之前,使用 reactjs 也做过一个小 Demo,虽然两者都是面向组件的开发思路,但是 reactjs 的全家桶方式,实在太过强势,而自己定义的 JSX 规范,揉和在

  • 新手vue构建单页面应用实例代码

    本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一.目录结构: 二.搭建项目 先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载

  • 使用vue重构资讯页面的实例代码解析

    从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在酝酿着如何将angular重构成vue. 代码结构设计 这个资讯项目代码整体都是使用angular.js来去实现的,而此次想重构的资讯详情页面只是其中的一个页面,所以新建了一个文件夹 /newApp .作为以后新技术的文件夹,以后使用vue技术的都放在这个文件夹下,区别于原先文件夹 /app . 在

  • Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu

  • 基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方式显示 , 所以一开始就考虑封装一个配置化的页面生成方案,目前已经有多个项目基于此方式配置开发上线,思路和实现分享一下. 使用场景 任意包含表单的h5页面(使用zarm库,或自行适配自己的库) 目标 代码实现简单和简洁 基于配置 新手上手快,无学习成本 老手易扩展和维护 写之前参考了市面上的一些方案

  • vue中使用element-ui进行表单验证的实例代码

    element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q

  • VUE单页面切换动画代码(全网最好的切换效果)

    我就废话不多说了,直接上代码吧! // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let dir

  • Vue.js 单页面多路由区域操作的实例详解

    单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

  • Vue仿手机qq的实例代码(demo)

    vue简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 概述 这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐 页面效果展示 免责声明 本项目为开源项目,如有类同,纯属巧合.

随机推荐