nuxt学习笔记

简介

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 ``` ``` 浏览器输入http://localhost:3000/my，显示如下 新建模板layouts/my.vue ``` ``` 在pages/my.vue里引用模板my,如果不显示设置layout，则默认引用layouts/default.vue ``` ``` 浏览器输入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是之作用在当前页面的 ``` ``` ## 新建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： ``` ``` 此时在查看网页源代码，可以看到“北京”,”山西“数据，如下图： > 服务端渲染会把渲染好的模板和数据都给到浏览器