logo头像

我有一个梦想。。。

Nuxt基本安装与使用

本文于409天之前发表,文中内容可能已经过时。

Nuxt 是基于 nodejs + vue 写的,服务器端渲染 框架(SSR)

安装

  1. 安装node.js
  2. 设置node使用淘宝镜像

    1
    2
    npm install -g nrm
    nrm use taobao
  3. 使用 npm 安装 vue-cli

    1
    npm install -g vue-cli
  4. 安装nuxt项目

    1
    vue init nuxt-community/starter-template 项目名称
  5. 如果 vue-cli 没有安装, 需先通过 npm install -g vue-cli 来安装。

  6. 启动项目:npm run dev

    目录结构

    image

页面组件

页面组件代码结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
模板内容(html内容,注意:必须有一个根元素)
</template>

<script>
// 组件的JS部分
export default {

}
</script>

<style>
组件的CSS部分
</style>

布局文件

  1. 如果项目中存在 layouts/default.vue文件,那么Nuxt在渲染每个页面时,都会使用这个 defaults.vue 文件做为布局文件
  2. 如果希望页面使用其它的布局文件可以在页面中使用 layout 来设置:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <template>
    <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
    </div>
    </template>

    <script>
    export default {
    props: ['error'],
    layout: 'blog' // 你可以为错误页面指定自定义的布局
    }
    </script>

打包资源

  1. npm run dev 支持热更新,开发模式启动服务器
  2. npm run build 网站上线前打包
  3. npm run start 生产环境启动服务器

参数的接收方式

  1. 用来唯一标识资源的参数写到路由上,比如:/goods/:id
  2. 搜索、排序、翻页等的参数,比如:/goods/?limit=xx&page=xx

两种参数与文件名总结

URL 对应页面 接收方式
/goods/:id pages/goods/_id.vue this.$route.params.id
/goods?id=x pages/goods.vue this.$route.query.id
/order/:catid/:userid/?limit=10 pages/order/_catid/_userid.vue 使用 this.$route 中的 params 和 query 来分别接收两种参数。

评论系统未开启,无法评论!