(二)01 -Nuxt-基于 Vue.js 的通用应用框架 & 安装-基于node.js，服务端执行该代码

Nuxt

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

• 官网 ：https://nuxtjs.org/
• 介绍：https://zh.nuxtjs.org/guide

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

• Vue 2
• Vue-Router
• Vuex (当配置了 Vuex 状态树配置项 时才会引入)
• Vue 服务器端渲染 (排除使用 mode: 'spa')
• Vue-Meta

压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

安装

步骤教程

第一步：从头开始新建项目

如果不使用 Nuxt.js 提供的 starter 模板，我们也可以从头开始新建一个 Nuxt.js 应用项目，过程非常简单，只需要 1个文件和1个目录。命令行中如下所示：

$ mkdir <项目名>

$ cd <项目名>

然后是：

npm init -y

第二步：新建 package.json 文件

package.json 文件用来设定如何运行 nuxt：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。

第三步：安装nuxt

一旦 package.json 创建好， 可以通过以下npm命令将 nuxt 安装至项目中：

$ npm install --save nuxt

第四步：新建pages目录和index.vue子文件

pages/index.vue 文件

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

创建 pages 目录：

$ mkdir pages

创建我们的第一个页面 pages/index.vue： 服务端执行该代码，只是不可见

（基于node.js的程序-生成的server.js文件可查看服务器配置）

<template>
  <h1>Hello world!</h1>
</template>

**第五步：命令行启动项目：**客户端和服务端同时编译渲染

$ npm run dev

现在我们的应用运行在 http://localhost:3000 上运行，进行页面显示。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

了解更多关于Nuxt.js应用的目录结构： 目录结构。

← 版本记录
项目目录结构 →

示例：

package.json 文件

{
  "name": "nuxtdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nuxt"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.0",
    "nuxt": "^2.9.2"
  }
}

pages/index.vue 文件

<template>
  <div>
    我的第一个Nuxt程序 - {{ name }}

    <nuxt-link to="/user/90">用户详情</nuxt-link>
    <nuxt-link to="/user/90">用户test</nuxt-link>

    <hr>

    <ul>
      <li
        v-for="user in userList"
        :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
// 此处代码会在服务端执行，也会在客户端执行
// console.log('index')

import axios from 'axios'
export default {
  // 异步数据
  // 会在组件创建之前执行（服务端）
  // 路由跳转的时候执行（客户端）
  // asyncData返回的数据，会融合到组件的data里
  // asyncData是在组件创建之前执行的，所以this无法获取到组件对象（this指向undefined）
  // 负责：在组件创建之前获取异步数据
  async asyncData () {
    console.log('asyncData')
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
    return {
      userList: data
    }
  },
  data () {
    return {
      name: 'zs'
    }
  },
  beforeCreate () {
    console.log('----------beforeCreate--------')
  },
  created () {
    // console.log(this)
    // 判断客户端执行
    if (!this.$isServer) {
      console.log('----------created--------')
    }
  },
  beforeMount () {
    console.log('----------beforeMount--------')
  },
  mounted () {
    console.log('----------mounted--------')
  },
  beforeUpdate () {
    console.log('----------beforeUpdate--------')
  },
  updated () {
    console.log('----------updated--------')
  },
  beforeDestroy () {
    console.log('----------beforeDestroy--------')
  },
  destroyed () {
    console.log('----------destroyed--------')
  },
}
</script>

<style>

</style>