基于vue单页应用的例子

2022-11-19 07:17:47

代码地址如下：
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;