新手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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
Django forms组件的使用教程
2018/10/08 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
教师自我评价范例
2013/09/24 职场文书
实习生个人找工作的自我评价
2013/10/30 职场文书
生产部管理制度
2014/01/31 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android