Structural analysis of Vue front end project

1. Project structure

2. Introduction to structure catalogue

2.1nuxt There are some in the bag nuxt The routing , Components and general pages .

2.api The folder is for remote request back-end interaction

2.3assets There are styles in the folder , Plug ins and pictures .
2.4components The folder is a wechat component .
2.5layout The folder is the footer page .
2.6middleware The folder is empty .
2.7pages The folder is the interpolation expression of the page, which uses asynchronous methods to obtain data before rendering the page .

<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> Starting time ： {
   { item.starttime }}</p>
                    <p> End time ： {
   { item.endtime }}</p>
                    <p> Venue ： {
   { item.address }}</p>
                    <p> The organizers ： {
   { item.sponsor }}</p>
                    <p> Registration deadline ： {
   { item.enrolltime }}</p>
                    <div class="join">
                        <button class="sui-btn btn-danger"> Sign up now </button>
                        <span class="will"> Registration is about to begin </span>
                    </div>
                </div>
            </div>
            <div class="simple-text">
                <div class="left-content">
                    <div class="content-item">
                        <div class="tit">
                            <span> The conference introduces </span>
                        </div>
                        <div class="text">
                            <h4></h4>
                            <p>{
   { item.summary }}</p>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="tit">
                            <span> Introduction to the topic </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> Event organizers </span>
                        </div>
                        <div class="text">
                            <p> The organizers ： {
   { item.sponsor }}</p>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="tit">
                            <span> Related links </span>
                        </div>
                        <div class="text">
                            <p> Official website ： infoQ.com</p>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="tit">
                            <span> Sharing diffusion </span>
                        </div>
                        <div class="social-share" data-sites="weibo, wechat, qq, qzone, douban" :data-title="' Tenth power  - ' + 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>

2.8label The folder and the following are basically and 2.7 The function of is written in a similar way .
2.9nuxt.config.js The file is the configuration title , plug-in unit , Styles and assigned modules .

module.exports = {
    /*
    ** Headers of the page
    */
    head: {
        title: ' Tenth power ',
        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'}
        ]
    },
    //  Configuration plug-ins 
    plugins: [
        // ssr:  Whether server-side rendering is required 
        { 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)/
                })
            }
        }
    }
};

2.10package.json And package-lock.json file
Usage introduction