(二)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>