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


Posted in Javascript onSeptember 18, 2017

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

步骤:

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

一、目录结构:

新手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

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

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

Javascript 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
angularjs路由传值$routeParams详解
Sep 05 #Javascript
vue-ajax小封装实例
Sep 18 #Javascript
信息滚动效果的实例讲解
Sep 18 #Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 #Javascript
angularjs实现猜数字大小功能
May 20 #Javascript
angular指令笔记ng-options的使用方法
Sep 18 #Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
You might like
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP多文件上传实例
2015/07/09 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
经销商会议欢迎词
2014/01/11 职场文书
优秀员工评语
2014/02/10 职场文书
第二课堂活动总结
2014/05/07 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
小学感恩主题班会
2015/08/12 职场文书
小学教代会开幕词
2016/03/04 职场文书