nuxt框架的基本使用

特性：

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES6/ES7 语法支持

打包和压缩 JS 和 CSS

HTML头部标签管理

本地开发支持热加载

集成ESLint

支持各种样式预处理器： SASS、LESS、 Stylus等等

支持HTTP/2 推送

安装：

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

npx create-nuxt-app <项目名> && 使用yarn yarn create nuxt-app <项目名>

目录说明：

1、资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

2、组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

3、布局目录 layouts 用于组织应用的布局组件。

该目录名为Nuxt.js保留的，不可更改。

4、middleware 目录用于存放应用的中间件。

5、页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

该目录名为Nuxt.js保留的，不可更改。

6、插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

该目录名为Nuxt.js保留，不可更改。

7、store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可**这些配置。

该目录名为Nuxt.js保留，不可更改。

8、nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。该文件名为Nuxt.js保留的，不可更改。

9、package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。该文件名为Nuxt.js保留的，不可更改。

nuxt传参：

编程式路由传参:

query传参：（和vue无区别，不改变路由规则不改变路由路径）

传参：this.$router.push({pash:"/",query:{id:111}})

接收：this.$router.query.id

params传参：（）

传参：this.$router.push(’/child/(要传的数据)’)

接收：路径要改；创建child文件夹；在child文件夹中创建_id.vue文件替换原来的child.vue文件；再通过this.$router.params.id接收数据；

注：params传参其实就是用路径传参；把传参路径和路由路径对上就可以收到传递的参数。

axios的用法

方法一：

asyncData({$axios}{

return $axios({

	url:"http://........."

	params:{uid:19802}

}).then((data)=>{

	return{list:data.data.data}

})

})

方法二：

asyncData({$axios}{

let arr=await $axios({

	url:"http://........."

	params:{uid:19802}

})

return{list:data.data.data}

})

store用法

Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：

1、引用 vuex 模块

2、将 vuex 模块 加到 vendors 构建配置中去

3、设置 Vue 根实例的 store 配置项

Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

1）普通方式： store/index.js 返回一个 Vuex.Store 实例

2）模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index是根模块）