Nuxt 标题页

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，旨在帮助你使用最佳实践轻松构建 SSR（服务器端渲染）Vue 应用程序。其内置了一些基本功能，例如自动生成路由、自动生成代码分割等等。

安装

新建一个项目。

$ mkdir my-nuxt-app && cd my-nuxt-app
$ yarn init -y

然后，安装 Nuxt.js，使用 NPM 或 Yarn，这里以 Yarn 为例：

$ yarn add nuxt

使用

新建一个 pages/index.vue 文件，定义一个 Vue 组件。

<template>
  <h1>Hello Nuxt!</h1>
</template>

在项目根目录下，新建一个 nuxt.config.js 文件，配置一些基本选项，例如页面标题、使用的 CSS 样式等。

module.exports = {
  head: {
    title: 'My Nuxt App',
  },
  css: [
    '~/css/main.css'
  ]
}

最后，在 package.json 中定义一个 npm 脚本，以运行 Nuxt。

{
  "scripts": {
    "dev": "nuxt"
  }
}

现在，可以在终端中使用如下命令启动开发服务器，访问 http://localhost:3000 看到页面。

$ yarn dev

构建和部署

Nuxt.js 应用程序可以打包成静态 HTML 文件，也可以部署到 Node.js 服务器上。需要执行以下操作。

$ yarn build # 构建
$ yarn start # 启动

总结

Nuxt.js 是一个不错的轻量级应用框架，尤其适合构建 SSR Vue 应用程序。其内置了很多有用的功能，可以提高开发效率。使用 Nuxt.js 可以让你更专注于业务逻辑。