代码地址如下：
http://www.demodashi.com/demo/13374.html

目录结构

  • src目录

    主要的代码目录

    • components

      存放项目组件
    • router

      路由文件
    • store

      store文件
    • main.js

      最终被打包到build文件
  • statics

    静态文件
  • idnex.html

    项目入口文件
  • webpack.config.js

    webpack配置文件

主要代码

入口index.html文件

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <!-- 这meta的作用就是删除默认的苹果工具栏和菜单栏-->

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- 禁止识别电话号码-->

    <meta name="format-detection"content="telephone=no" />

    <title>心情手札</title>

    <link rel="shortcut icon" href="./favicon.ico">

    <link rel="stylesheet" type="text/css" href="./statics/reset.css">

    <link rel="stylesheet" type="text/css" href="./statics/vue-material.css">

    <link rel="stylesheet" type="text/css" href="./statics/iconfont/material-icons.css">

    <link rel="stylesheet" type="text/css" href="./statics/vue-swipe.css">

    <link rel="stylesheet" type="text/css" href="./statics/common.css">

</head>

<body>

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

    <script src="./build/build.js"></script>

</body>

</html>

main.js文件

import Vue from 'vue';

import App from './App.vue';

import router from './router/index';

import store from './store/index';

import VueMaterial  from 'vue-material';

/*全局常量*/

global.API_PROXY = 'https://bird.ioliu.cn';

//注册主题

Vue.use(VueMaterial);

Vue.material.registerTheme('default', {

    primary: 'blue',

    accent: 'red',

    warn: 'red',

    background: 'white'

});

Vue.material.registerTheme('blue', {

    primary: 'blue',

    accent: 'red',

    warn: 'red',

    background: 'white'

});

Vue.material.registerTheme('teal', {

    primary: 'teal',

    accent: 'red',

    warn: 'red',

    background: 'white'

});

Vue.material.registerTheme('brown', {

    primary: 'brown',

    accent: 'red',

    warn: 'red',

    background: 'white'

});

Vue.material.registerTheme('indigo', {

    primary: 'indigo',

    accent: 'red',

    warn: 'red',

    background: 'white'

});

new Vue({

    router,

    store,

    el: '#app',

    render: h => h(App)

});

路由配置文件

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({

    base:'/sunnyNote/',

    routes:[

        {

            name:'home',

            path:'/home',

            component: require('../views/home/home.vue'),

            children:[

                {

                    name:'movie',

                    path:'/movie',

                    component:require('../components/movie/movie.vue')

                },

                {

                    name:'music',

                    path:'/music',

                    component:require('../components/music/music.vue')

                },

                {

                    name:'photo',

                    path:'/photo',

                    component:require('../components/photo/photo.vue')

                },

                {

                    name:'joke',

                    path:'/joke',

                    component:require('../components/joke/joke.vue')

                }

            ]

        },

        {path:'*',redirect:'./movie'}

    ]

});

export default router;

运行步骤

  1. 下载安装node
  2. 切换到根目录
  3. npm install

    安装所有的依赖包(第一次时)
  4. npm run dev

    开启dev-server服务
  5. 谷歌浏览器输入http://localhost:8080即可访问（手机模式预览）

运行效果

注意点

本项目是拿来作为vue单页项目学习使用，接口都来自第三方，不保证项目中的接口稳定（调用次数有限，网易云音乐地址已经不能播放）。发出来供大家学习参考，不足之处还望指正。

基于vue单页应用的例子

代码地址如下：
http://www.demodashi.com/demo/13374.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权

基于vue单页应用的例子的更多相关文章

  1. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  2. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  3. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  4. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  5. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  6. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  7. vue单页(spa)前端git工程拆分实践

    背景 随着项目的成长,单页spa逐渐包含了许多业务线 商城系统 售后系统 会员系统 ... 当项目页面超过一定数量(150+)之后,会产生一系列的问题 可扩展性 项目编译的时间(启动server,修改 ...

  8. vue单页应用首次加载太慢之性能优化

    问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...

  9. 【初恋】vue单页应用开发总结

    vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...

随机推荐

  1. 【树形dp】Rebuilding Roads

    [POJ1947]Rebuilding Roads Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 11934   Accep ...

  2. BZOJ 1042：[HAOI2008]硬币购物（容斥原理+DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1042 [题目大意] 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4. 某人去 ...

  3. 一个简单的Spring程序

    首先,要用Eclipse开发Spring程序,需要安装Spring插件并重启Eclipse 具体操作: 新建java Project后,导入需要使用的包(提前下好Spring),Spring包包含6个 ...

  4. Activity（活动）生命周期--项目测试

    一.新建一个Activitylifetest项目,允许Android Studio帮我们自动创建活动和布局,并且勾选Luancher Activity来将创建的活动设置为主活动. 可以参考: http ...

  5. mongodb安装和配置，遇到问题和解决方法

    自己不知道怎么的,心血来潮想重新来安装和配置一下mongodb,之前自己也是按照别人的来整的,印象不深刻.第二遍安装配置遇到很多问题. 弄了两个多小时,期间遇到很多问题: 遇到的主要问题 1.拒绝访问 ...

  6. [转] <context-param>与<init-param>的区别与作用

    看到一篇关于web.xm文件中标签的讲解,顺带还阐述了容器的工作流程,因此转载此,以供参考,原文地址:与的区别与作用 <context-param>的作用: web.xml的配置中< ...

  7. dump备份mysql库

    Auth: Jin Date: 20140403 Content: #!/bin/bash - ### auth: Jin ### ### Desc: 根据配置文件里的ip,端口(dblist文件格式 ...

  8. Unity-EasyTouch插件之ReservedArea的运用（主要是避免JoyStick与Touch的矛盾）

    昨天有人问我,easytouch插件中有个小bug,其实也不算是bug,插件的设计者早就考虑到这样的情况. 他说同时用easyjoystick和easytouch会发生,移动摇杆的时候,touch(触 ...

  9. 网络工程师岗位基础面试题【适用于CCNA/CCNP基础】

    网络工程师岗位基础面试题[适用于CCNA/CCNP基础] 1: 交换机是如何转发数据包的?交换机通过学习数据帧中的源MAC地址生成交换机的MAC地址表,交换机查看数据帧的目标MAC地址,根据MAC地址 ...

  10. 【LaTeX】E喵的LaTeX新手入门教程（5）参考文献、文档组织

    这不是最后一篇,明天开始建模所以会从6号开始继续更新.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版 [LaTeX]E喵的La ...