新手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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
Js获取事件对象代码
Aug 05 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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动态图像的创建
2006/10/09 PHP
php入门小知识
2008/03/24 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php实现登录页面的简单实例
2019/09/29 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python书单 不将就
2017/07/11 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python实现大学人员管理系统
2019/10/25 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
工作交流会欢迎词
2014/01/12 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
西安兵马俑导游词
2015/02/02 职场文书
实施意见格式范本
2015/06/05 职场文书
银行岗位培训心得体会
2016/01/09 职场文书