(二)01 -Nuxt-基于 Vue.js 的通用应用框架 & 安装-基于node.js，服务端执行该代码 vue.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文件可查看服务器配置）

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

$ 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" } }

【(二)01 -Nuxt-基于 Vue.js 的通用应用框架 & 安装-基于node.js，服务端执行该代码】pages/index.vue 文件

> // 此处代码会在服务端执行，也会在客户端执行 // 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--------') }, } >