Nuxt.js

Nuxt 目录

1.nuxt目录 项目编译后目录 相当于classes
2.Component 组件目录
3.layouts 布局目录
4.pages 所有页面目录
5.plugins 插件目录
6.static 静态资源目录,用于存放不需要编译js css
7.store vuex 目录
8.nuxt.config.js nuxt核心配置
9.package.json vue项目核心配置

nuxt.js的用处

在学习nuxt.js中 , 我们首先是要认知以下三个:

1. SPA : 单页web应用 , 使用vue实现SPA ,不利于seo ,vue响应给浏览器的是程序而不是数据
2. SEO : 搜索引 优化 : 提高收录, 提高权重搜索确定结果排序
3. SSR : 服务端渲染 , 网页是通过服务端渲染生成传输给客户端
   如图所示:
   

自定义axios

1.nuxt.config.js 配置baseResult 路径
2.在插件 可以获的整合后的axios : exprop default ({KaTeX parse error: Expected 'EOF', got '}' at position 6: axios}̲,jnject)={} 3.对…request.函数名 (findAll) ()
asyncDate 和fetch中使用 : context .app.$request.fimclAA()

编写api.js 对 内置的 $axios进行增强

//自定义函数
const request = {
test : (params) => {
return axios.get(’/web-service/test’,{
params
})
},
}

var axios = null
export default ({ $axios }, inject) => {

//3） 保存内置的axios
axios = $axios

//4) 将自定义函数交于nuxt
// 使用方式1：在vue中，this.$request.xxx()//使用方式2：在nuxt的asyncData中，content.app.$request.xxx()

inject(‘request’, request)
}

路由

1.路由概述

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间使用路由，我们建议使用 标签。
是vue原生态切换路径标签。
在原生态的基础上，进行了增强
2基础路由
自动生成基础路由规则

路径	件位置及其名称
/	pages/index.vue
-/user-	-pages/user/index.vue-
-/user/one-	-pages/user/one.vue

• 情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）

  • 资源位置： ~/pages/user/one.vue
  • 访问路径：http://localhost:3000/user/one

• 情况2：每一个目录下，都有一个默认文件 index.vue

  • 资源位置： ~/pages/user/index.vue
  • 访问路径：http://localhost:3000/user

动态路由
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录

路由中路径匹配	组件位置及其名称
/	pages/index.vue
- /user/:id-	-pages/user/_id.vue
-/:slug-	-pages/_slug/index.vue-
-
/:slug/comments	pages/_slug/comments.vue

动态命名路由

路径 “/news/123”匹配“_id.vue”还是“_name.vue”？
我们可以使用解决以上问题
第2新闻
第3新闻
通过name 确定组件名称：“xxx-yyy”
通过params 给对应的参数传递值

ajax操作

使用axios发送ajax
在vue页面中，通过 this.$axios.xxx()操作ajax。this.$axios 与之前 axios等效。

this.KaTeX parse error: Unexpected character: '' at position 160: …ncData发送异步数据** ̲发送一个ajax 通过 co…axios 来发送ajax请求，与之前使用 axios等效。
async asyncData( content ) {
let { data } = await content.$axios.get(’/web-service/news’,{
params : {
pageNum : 1,
pageSize : 8 ,
sortWay : ‘asc’
}
})
return { news : data.data }
},
发送多个ajax

async asyncData( content ) {
let [结果1,结果2] = await Promise.all([ ajax请求1, ajax请求2])
return {
topNews: 结果1的数据,
categorys: 结果2的数据
}
},