nuxtjs学习笔记

官方文档地址

新建项目

npx create-nuxt-app <project-name> # use npx
yarn create nuxt-app <project-name> # use yarn
npm init nuxt-app <project-name> # use npm

目录结构

其中components用于存放普通组件，pages用于存放页面组件，plugins用于存放vue下载的插件，static用于存放静态文件，store用于状态管理

项目启动时nuxt会自动扫描pages文件夹并自动创建相应的router，router的path即为/ + <组件文件名>，因此nuxt不需要手写router，components中的组件也是如此，当页面组件用到components组件时nuxt会自动配置配置页面组件的components

在页面间使用路由推荐使用nuxt自带的<nuxt-link>标签，用法同v-link
nuxt也有用于异步跳转的函数：this.$router.push('/path')

路由参数校验

可以使用validate()方法校验路径参数是否正确并跳转404页面

详细参考页面校验 API

异步数据

nuxtjs增加了一个叫asyncData的方法，，这个方法仅限于页面组件之间使用，方法的返回值将会合并于组件的data方法返回的数据

使用asyncData()方法往往会用到axios，nuxt官方推荐使用nuxt自己封装的axios

安装：

yarn add @nuxtjs/axios # use yarn
cnpm install @nuxtjs/axios --save # use npm

然后在nuxt的配置文件nuxt.config.js中配置

modules: [
    '@nuxtjs/axios',
],

之后就可以在asyncData方法中使用axios

async asyncData({ app }) {
  const ip = await app.$axios.$get('http://icanhazip.com')
  return { ip }
}

资源文件

nuxt中不再使用vue的@引用根目录而是使用~

假设项目中有一张图片资源文件

想要在组件中引用这张图片可以使用"~/static/img/010_01.jpeg"引用路径

此外在css文件中引用资源文件不能使用/alias来引用，必须使用~assets（没有斜杠）或@别名，即background:url("~assets/banner.svg")

store

nuxtjs内部集成了vuex
因此不需要安装和导入就可以直接使用
在\store路径下新建js文件

export const state = () => ({
	user: ''
})

export const mutations = {
	add (state, object) {
			//state.userInfo.push(object)
			state.user = object
	}
}

export const actions = {
	getData (store) {
			setTimeout(() => {
					store.commit('add')
			}, 3000)
	}
}

然后就可以在组件中使用

this.$store.commit('user/add', this.txt)
let res = this.$store.state.user.user