美文网首页学习笔记
Nuxt.js服务端渲染demo实践

Nuxt.js服务端渲染demo实践

作者: 程序渣 | 来源:发表于2018-08-06 16:31 被阅读0次

    安装

    • 全局安装vue-cli(若已安装,直接跳过)
    • vue init nuxt-community/starter-template <project-name>

    路由创建

    在page目录中创建.vue文件或目录,nuxt会为我们自动创建路由
    page
    |---- index.vue (对应路由为 /
    |---- login.vue (对应路由为/detail
    |---- user
    |---------- account.vue (对应路由为/user/account.vue
    |---------- index.vue (对应路由为 /user
    |---- topic
    |--------detail
    |------------_id
    |----------------index.vue (对应路由为 /topic/detail/:id

    异步数据获取

    使用钩子函数asyncData

    <template>
        <div class="topic-list">
            <p @click="loadMore">topicList</p>
            <p v-for="item in list" :key="item">{{item}}</p>
        </div>
    </template>
    <script>
    export default {
        name: 'topicList',
        data () {
            return {
            };
        },
        asyncData () {
            return new Promise((resolve, reject) => {
                setTimeout( ()=> {
                    resolve([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
                }, 1000)
            }).then((data) => {
                return {list: data};
            })
        },
        methods: {
            loadMore () {
                this.list = this.list.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
            }
        }
    };
    </script>
    

    后续慢慢再补充吧,反正也是给自己叨逼叨叨逼叨的

    相关文章

      网友评论

        本文标题:Nuxt.js服务端渲染demo实践

        本文链接:https://www.haomeiwen.com/subject/zuvvvxtx.html