基于vue单页应用的例子
目录结构
- src目录
主要的代码目录- components
存放项目组件 - router
路由文件 - store
store文件 - main.js
最终被打包到build文件
- components
- 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;
运行步骤
- 下载安装node
- 切换到根目录
- npm install
安装所有的依赖包(第一次时) - npm run dev
开启dev-server服务 - 谷歌浏览器输入http://localhost:8080即可访问（手机模式预览）
运行效果
注意点
本项目是拿来作为vue单页项目学习使用，接口都来自第三方，不保证项目中的接口稳定（调用次数有限，网易云音乐地址已经不能播放）。发出来供大家学习参考，不足之处还望指正。
基于vue单页应用的例子
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
基于vue单页应用的例子的更多相关文章
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事
实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...
- vue 单页应用中微信支付的坑
vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
- vue单页(spa)前端git工程拆分实践
背景 随着项目的成长,单页spa逐渐包含了许多业务线 商城系统 售后系统 会员系统 ... 当项目页面超过一定数量(150+)之后,会产生一系列的问题 可扩展性 项目编译的时间(启动server,修改 ...
- vue单页应用首次加载太慢之性能优化
问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...
- 【初恋】vue单页应用开发总结
vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...
随机推荐
- 【BZOJ 2791】 2791: [Poi2012]Rendezvous （环套树、树链剖分LCA）
2791: [Poi2012]Rendezvous Description 给定一个n个顶点的有向图,每个顶点有且仅有一条出边.对于顶点i,记它的出边为(i, a[i]).再给出q组询问,每组询问由两 ...
- 【BZOJ 2186】 2186: [Sdoi2008]沙拉公主的困惑 （欧拉筛，线性求逆元）
2186: [Sdoi2008]沙拉公主的困惑 Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞 ...
- 【动态规划】POJ1661 Help Jimmy
Help Jimmy Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11621 Accepted: 3827 Descr ...
- BZOJ 2697 特技飞行（贪心）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2697 [题目大意] 神犇航空开展了一项载客特技飞行业务. 每次飞行长N个单位时间,每个 ...
- 【强连通分量缩点】【DFS】【动态规划】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem B. British Menu
有向图,不经过重复点的最长链,强连通分量大小不超过5. 每个强连通分量内部暴力预处理任意两对点之间的最长路,外面DAG上dp. 不是很好写,但是预处理完了之后,可以重构每个强连通分量内部的结构,然后整 ...
- Problem G: 零起点学算法102——删除字符
#include<stdio.h> #include<string.h> int main() { ],a; while(gets(ch)!=NULL) { scanf(&qu ...
- （转）Linux下数据段的区别（数据段、代码段、堆栈段、BSS段）
进程(执行的程序)会占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途 不一而不尽相同,有些内存是事先静态分配和统一回收的, ...
- (Mark)JS中的上下文
执行上下文的代码被分成两个基本的阶段来处理: 进入执行上下文 执行代码 变量对象的修改变化与这两个阶段紧密相关. 注:这2个阶段的处理是一般行为,和上下文的类型无关(也就是说,在全局上下文和函数上下文 ...
- 一个简单的WebService服务
现在,网上提供的免费的webservice服务的网站: http://www.webxml.com.cn/ 从扩展名上看,是 .net构建的网站. 看看功能的实现效果: 需求:我们要远程调用手机号归属 ...
- PostgreSQL配置文件--日志和错误
6 错误操作和日志 ERROR REPORTING AND LOGGING 6.1 日志写到哪里 Where to Log 6.1.1 log_destination 字符串 默认: log_dest ...