Nuxt基本安装与使用

Nuxt 是基于 nodejs + vue 写的，服务器端渲染 框架（SSR）

安装

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

npm install -g nrm
nrm use taobao

3. 使用 npm 安装 vue-cli

npm install -g vue-cli

4. 安装nuxt项目

vue init nuxt-community/starter-template 项目名称

5. 如果 vue-cli 没有安装, 需先通过 npm install -g vue-cli 来安装。
6. 启动项目：npm run dev

页面组件

页面组件代码结构：

<template>
    模板内容(html内容，注意：必须有一个根元素)
</template>

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

}
</script>

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

布局文件

1. 如果项目中存在 layouts/default.vue文件，那么Nuxt在渲染每个页面时，都会使用这个 defaults.vue 文件做为布局文件
2. 如果希望页面使用其它的布局文件可以在页面中使用 layout 来设置：

<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

两种参数与文件名总结