基于vue单页应用的例子

立即下载用AI写一个

发布时间：2018-05-30

13人 | 浏览：5156次 | 收藏 |

技术：vue+axios+material-ui

概述

本例子是学习vue时自己做的一个小项目，用的是vue+axios+material-ui搭建，vue-router,vuex也有使用，对后面vue的系统学习起到了极大的练手作用。

详细

### 目录结构
![目录结构](/contentImages/image/20180529/rgPr584S63rwpPVITFN.png "目录结构")
- src目录
主要的代码目录
	- components
	存放项目组件
	- router
路由文件
	- store
store文件
	- main.js
最终被打包到build文件
- statics
静态文件
- idnex.html
项目入口文件
- webpack.config.js
webpack配置文件

### 主要代码
入口index.html文件
```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 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文件
```javascript
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)
});
```
路由配置文件
```javascript
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
1. 切换到根目录
1. npm install
安装所有的依赖包(第一次时)
1. npm run dev
开启dev-server服务
1. 谷歌浏览器输入http://localhost:8080即可访问（手机模式预览）

### 运行效果

![](/contentImages/image/20180529/1LKSrZOjoxjksBPTrd2.png)

![](/contentImages/image/20180529/QcPGac0dtGWoTpWVLKI.png)

![](/contentImages/image/20180529/gp0Eg5mIbIXFNwMXLVH.png)

![](/contentImages/image/20180529/EKFENNGZ7zOWyhMa9Hp.png)

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

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码