vue前端项目的结构分析

1.项目结构

2.结构目录介绍

2.1nuxt包里面放的一些nuxt的路由，组件和通用页面。

2.api文件夹放的是远程请求后端交互

2.3assets文件夹里面放的是样式，插件和图片。
2.4components文件夹是微信组件。
2.5layout文件夹放的是页尾页面。
2.6middleware文件夹是空的略。
2.7pages文件夹是页面的插值表达式都是使用异步方法在渲染页面之前获取到数据。

<template>
    <div>
        <div class="wrapper activities">
            <h1>{{ item.name }}</h1>
            <div class="img-text">
                <div class="left-img">
                    <img :src="item.image" alt=""/>
                </div>
                <div class="right-txt">
                    <p>开始时间： {{ item.starttime }}</p>
                    <p>结束时间： {{ item.endtime }}</p>
                    <p>举办地点： {{ item.address }}</p>
                    <p>主办方： {{ item.sponsor }}</p>
                    <p>报名截止： {{ item.enrolltime }}</p>
                    <div class="join">
                        <button class="sui-btn btn-danger">立即报名</button>
                        <span class="will">报名即将开始</span>
                    </div>
                </div>
            </div>
            <div class="simple-text">
                <div class="left-content">
                    <div class="content-item">
                        <div class="tit">
                            <span>大会介绍</span>
                        </div>
                        <div class="text">
                            <h4></h4>
                            <p>{{ item.summary }}</p>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="tit">
                            <span>议题简介</span>
                        </div>
                        <div class="text">
                            <h4></h4>
                            <p>{{ item.detail }}</p>
                        </div>
                    </div>
                </div>
                <div class="right-intro">
                    <div class="content-item">
                        <div class="tit">
                            <span>活动组织者</span>
                        </div>
                        <div class="text">
                            <p>主办方： {{ item.sponsor }}</p>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="tit">
                            <span>相关链接</span>
                        </div>
                        <div class="text">
                            <p>活动官网： infoQ.com</p>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="tit">
                            <span>分享扩散</span>
                        </div>
                        <div class="social-share" data-sites="weibo, wechat, qq, qzone, douban"
                             :data-title="'十次方 - ' + item.name">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import "~/assets/css/page-sj-activity-detail.css";
    import gatheringApi from "@/api/gathering";

    export default {
        asyncData({params}) {
            return gatheringApi.findById(params.id).then(response => {
                return {
                    item: response.data.data,
                };
            });
        },
        async function({params}) {
            return gatheringApi.findById(params.id).then(response => {
                return {
                    item: response.data.data,
                };
            });
        },
        head: {
            script: [
                {src: 'http://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js'},
            ],
            link: [
                {rel: 'stylesheet', href: 'http://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css'},
            ],
        },
    }
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

2.8label文件夹和后面的基本都是和2.7的功能写法相似。
2.9nuxt.config.js文件是配置标题，插件，样式和指定模块。

module.exports = {
    /*
    ** Headers of the page
    */
    head: {
        title: '十次方',
        meta: [
            {charset: 'utf-8'},
            {name: 'viewport', content: 'width=device-width, initial-scale=1'},
            {hid: 'description', name: 'description', content: 'Nuxt.js project'}
        ],
        link: [
            {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
        ]
    },
    // 配置插件
    plugins: [
        // ssr: 是否需要服务端渲染
        { src: '~/plugins/vue-infinite-scroll.js', ssr: false },
        { src: '~/plugins/element-ui.js', ssr: false },
        { src: '~plugins/nuxt-quill-plugin.js', ssr: false },
    ],
    css: [
        'element-ui/lib/theme-chalk/index.css',
        // quill-editor
        'quill/dist/quill.snow.css',
        'quill/dist/quill.bubble.css',
        'quill/dist/quill.core.css',
    ],
    /*
    ** Customize the progress bar color
    */
    loading: {color: '#3B8070'},
    /*
    ** Build configuration
    */
    build: {
        /*
        ** Run ESLint on save
        */
        extend(config, {isDev, isClient}) {
            if (isDev && isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                })
            }
        }
    }
};


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

2.10package.json与package-lock.json文件
用法介绍