简介
Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架应运而生。
Nuxt.js 框架是如何运作的?
Nuxt.js 集成了以下组件/框架,用于开发完整而强大的 Web 应用:
- Vue 2
- Vue-Router
- Vuex (当配置了 Vuex 状态树配置项 时才会引入)
- Vue 服务器端渲染 (排除使用 mode: 'spa')
- Vue-Meta
流程图
# 安装
确保安装了npx(npx在NPM版本5.2.0默认安装了):
```
$ npx create-nuxt-app <项目名>
```
它会让我们进行一些选择,依次选择完之后,当运行完时,它将安装所有依赖项,因此下一步是启动项目:
```
$ cd
$ npm run dev
```
浏览器输入http://localhost:3000/可以看下以下内容
# 目录结构
### 1.资源目录
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
### 2.组件目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。
### 3.布局目录
布局目录 layouts 用于组织应用的布局组件。若无额外配置,该目录不能被重命名。
### 4.中间件目录
middleware 目录用于存放应用的中间件。
### 5.页面目录
页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。若无额外配置,该目录不能被重命名。
### 6.插件目录
插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
### 7.静态文件目录
静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/robots.txt 映射至 /robots.txt。若无额外配置,该目录不能被重命名。
### 8.Store 目录
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置。若无额外配置,该目录不能被重命名。
### 9.nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。若无额外配置,该文件不能被重命名。
### 10.package.json 文件
package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。该文件不能被重命名。
# 实践
## 新建page、layout
新建页面pages/my.vue
```
my page
```
浏览器输入http://localhost:3000/my,显示如下
新建模板layouts/my.vue
```
```
在pages/my.vue里引用模板my,如果不显示设置layout,则默认引用layouts/default.vue
```
my page
```
浏览器输入http://localhost:3000/my,显示如下
## 引入css
新建assets/css/main.css,在nuxt.config.js里引入,这里引入的css是全局的
```
...
css: ['~/assets/css/main.css'],
...
```
新建assets/css/my.css,在pages/my.vue里引入,这里引入的css是之作用在当前页面的
```
my page
```
## 新建server
新建server/instance/city.js
```
//以下2种写法都可以
// const Router =require( 'koa-router')
// const router=new Router({
// prefix:'/city'
// })
const router = require('koa-router')();
router.prefix('/getCityList')
router.get('/', (ctx) => {
ctx.body = {
data: {
list: ['北京', '山西']
}
}
})
module.exports = router;
```
在浏览器输入http://localhost:3000/getCityList如下图:
## 在vue页面使用请求server数据并使用
新建 pages/city.vue
```
```
在浏览器输入http://localhost:3000/city如下图:
但是查看网页源代码,是看不到“北京”,“山西”数据的,为什么呢?因为,服务器渲染期间不会执行mounted,所以下发到浏览器的模板里没有数据。
要想在网页源代码中看到数据,应该怎么办呢?Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。
> 注意:由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。
修改后的新建 pages/city.vue:
```
```
此时在查看网页源代码,可以看到“北京”,”山西“数据,如下图:
> 服务端渲染会把渲染好的模板和数据都给到浏览器