Nuxt.js 入门到实战 多参数 中间件 插件异步获取数据

Nuxt.js

---

Vue提供了服务端渲染及还能支撑spa单页功能的框架。Nuxt.js 主要关注的是应⽤的 UI渲染。功能强大，方便我们快速上手。开箱即用。特点：

1. 模块化
2. 高效快速
3. 开发体验
4. 静态⽂件服务 & 强大路由功能

官网

安装: Nuxt模板项目 官方推荐 npx 这样会安装最新模板。然后进入项目。运行

npx create-nuxt-app <项目名>
cd <项目名>
npm run dev

然后选择你自己需要的插件依赖，不知道可以一直选默认；

整体项目目录结构

• assets:资源目录assets
  用于组织未编译的静态资源如LESS、SASS 或JavaScript。
• components:组件目录components 用于组织应用的Vue.js组件。Nuxt.js 不会扩展增强该目
  录下Vue.js组件，即这些组件不会像页面组件那样有asyncData 方法的特性。
• layouts:布局目录layouts 用于组织应用的布局组件。
• middleware:中间件目录用于存放应用的中间件。
• pages:页面目录
  pages用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的. vue
  文件并自动生成对应的路由配置。
• plugins:插件目录plugins 用于组织那些需要在根vue. js应用实例化之前需要运行的
  Javascript插件。
• static:静态文件目录
  static用于存放应用的静态文件，此类文件不会被Nuxt,js调用Webpack
  进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径/下。
• store:用于组织应用的Vuex状态树文件。Nuxt.js 框架集成了Vuex状态树的相关功能配置，
  在store目录下创建一个index. js |文件可激活这些配置。
• nuxt.config.js:该文件用于个性化配置Nuxt应用。

路由

---

• 路由自动生成

  page 文件中的路由 .vue 文件。可以自动生成以文件名为路由名生成。特高效率

  page/user.vue => http://localhost:3000/user 则生成这样目录

  检查生成的路由配置，在.next 文件中 router.js。

• 嵌套路由

  Nuxt 中在page目录下得出现 .vue 同名的文件才能出发嵌套利用。不然你在 page中创建其他文件，在文件中创建其他 .vue 文件事，只能生成路径的嵌套。

  • 错误示范：目录：/page/user/getUserInfo.vue => http://localhost:3000/user/getUserInfo

    路径看上去可以，可是去路由配置看发现getUserInfo路由和user是同级路由。

  • 正确写法：

    1. 在page创建父页面： 如 user.vue
    2. 在父页面 user.vue 中使用 nuxt-child 标签。他类似 router-view
    3. page创建包裹子路由的文件夹，且父亲同名：page/user
    4. 比如： 创建子路由 用户个人信息。page/user/userOne.vue => localhost:3000/user/userOne

  文件中可以继续创建文件，继续多级嵌套路由。方法同理

• 路由传参

  路径跳转给下一个页面传递参数。

  _id.vue {{ $route.parmas.id }} =》 /user/99 则99就是id参数

  • 多参数传值： 需要继续嵌套文件。例如： 继续嵌套更新 /user/id/name 。这样想id和name做参数，步骤
  • 1创建_id.vue 并在页面使用 nuxt-child 标签
  • 2创建**_id** 文件夹 在文件内 创建_name.vue
  • 3在_id.vue 和 _name.vue 都可以使用 $route.parmas 查看参数了

• 路由跳转

  nuxt-link 标签. 和roter-link 用法一样。指定的页面 默认预加载。提供良好的体验

  如果不想预加载 销毁第一资源，可以使用 no-prefetch 取消。点击页面才去加载。

• 自定义路由配置

  如果Nuxt默认生成利用方式 不满足自己开发。那么你可以在 nuxt.config.js 中修改。如替换默认别名。参数，传参方式等等…

  //router 自定义路由配置 满足自己需要
    router: {
      extendRoutes(routes, resolve) {
        routes.push({
          path: '/foo', //替换默认 也可访问foo,就可以访问hzfFoo.vue
          component: resolve(__dirname, 'pages/hzfFoo.vue');
        })
      },
    },
  

layout 全局布局

---

Nuxt默认布局是 default.vue。如果你希望你的登录注册也，和后台页区分开，可以自己定义登录布局

• 自定义布局

1. 定义布局 login.vue

2. 使用自定义布局

export default {
    layout: 'login',
    ...
}

• 捕获错误布局页

  在layout中定义 error.vue

页面头部信息设置

---

Nuxt生成的页面不在是以前那样只有一个index.html。现在是多个页面。那么可以通过head() 方法，给页面自定义头部信息

export default {
    head() {
      return {
        title: '个人主页大全',
        // vue-meta利用hid确定要更新meta 判断是否和首页一样，一样就给替换
        meta: [
            { 
              name: "description", hid: "description", 
              content: "这个网页主要展示你的个人用户信息，爱好，性别，年龄等..." 
            }
        ],
        link: [{ rel: "icon", href: "https://img.kaikeba.com/kkb_portal_icon.ico" }]
      }
    },
}     

异步数据获取

---

当我需要请求接口数据，就需要异步处理。Nuxt提供了专门的函数。

asyncDate() 该方法可以让我设置组件数据之前。获得异步数据或者处理数据.

• 参数方式使用{ xxx } ES6解构自取。例如: async asyncData({ $axios, params, error })

1. $axios: 接口调用
2. params： 路由参数
3. error： 传递错误信息，给会跳转到默认错误页面显示

• 返回对象。该对象函数的对象类型。他用来合并data()中的数据，这样异步获取的数据就映射到data中

案例演示-步骤:

1. 安装axios npm install @nuxtjs/axios -S

2. 配置axios 在nuxt.config.js

   modules: [
   	'@nuxtjs/axios',
   ],
   axios: {
   	proxy: true
   },
   proxy: {
       // 饿了么
       "/restapi": "https://h5.ele.me"
   },
   

3. asyncData调用axios , 修改配置文件记得重启；

    async asyncData({ $axios, params, error }) {
        // 这个方法执行时间很早，没有this。所以不能用this.route.params
   
        //const data = await $axios.get('/xxx');
   
        // $get 直接只返回data 不用开发者自己去点出来
        const data = await $axios.$get('/restapi/bgs/poi/search_poi_nearby_alipay?keyword=广州&offset=0&limit=20');
        console.log(data);
   
        if (Array.isArray(data) && data.length > 0) {
            // asyncData 返回对象 会和data中的对象合并，
            return { list: data }
        }
        error({ statusCode: 400, message: '失败--'})
    }
   

中间件

---

很类似于路由守卫，可以全局，也可以局部到某个页面。页面每次切换都会执行，可以做一些权限的判断

0. 在 middleware 文件中定义 例如：auth.js

   export default function ({ route, redirect, store }) {
     console.log(route); //路由
     console.log(redirect); // 路由跳转回调
     console.log(store); // vuex
     
     //redirect('/login')
   }
   

1. 全局 在nuxt.config.js 中

   module.expors = {
   	router: {
   		middleware: ['auth']
   	}
   }
   

2. 局部

   export default {
       // 局部中间件
       middleware: ["auth"]
   }
   

.vue文件其他常用配置

---

Nuxt和常规Vue页面配置中，出现了很多变化。比如: anyncData() 函数比创建之前还早执行的。或者fecth函数，这些都是为开发者提供更多开发体验。

• anyncData() > 组件创造之前就最早执行，如果是首屏则是先是 nuxtServerInit
• fecth() > 和anyncData类似获取会在组件创造之前执行。不过在anyncData后面 并且 fetch ⽅法不会设
  置组件的数据
• head() > 设定HTML的头部信息
• layout: “” > 设定使用的布局是那个
• middleware: [""] > 设定中间件名称
• transition: Nuxt.js 使用 Vue.js transition组件来实现路由切换时的过渡动效
• scrollToTop: true/false > 属性用于控制页面渲染前是否滚动至页面顶部
• validate: 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性
• loading： 手动设置页面进度条时间颜色大小等。也可以nuxt.config.js全局配置
  1. 参考：https://zh.nuxtjs.org/api/configuration-loading/

stroe文件 vuex状态管理

---

Nuxt 也提供了Vuex的状态树管理嵌入在其中，不用安装即可使用，可在根目录 store 文件夹中定义

演示案例：

1. 在 stroe 中创建user.js 管理用户数据状态

   export const state = () => ({
     token: 'null token'
   });
   
   export const mutations = {
     init(state, token) {
       state.token = token;
     }
   };
   
   export const getters = {
     isLogin(state) {
       return !!state.token;
     }
   };
   
   export const actions = {
     // 异步登录
     login({ commit, getters }, params) {
       Promise.resolve().then(() => {
         commit("init", params);
        return getters.isLogin;
      })
     }
   };
   
   

2. 在login.vue 中使用它：注意。dispatch调用指定名称

   onLogin() {
       //调用store/user.js 下的 login 异步方法
       this.$store.dispatch("user/login", 'toKen sxw*&s1n76%$').then(red => {
           console.log(red);
           const redirect = this.$route.query.redirect || '/';
           this.$router.push(redirect)
       })
   }
   

nuxtServerInit 首屏获取服务端数据

有时候当我刷新页面。发现保存后台的数据状态就没有了，这个时候我们可以使用 nuxtServerInit 函数解决。页面重新刷新[首屏] 时候，可以执行，拿到服务端数据，然后在保存当我们状态中

演示： 在store 文件中创建 index.js 注意：nuxtServerInit 只能用 store/index.js 中，且在服务端执行

export const actions = {
  // 参数1： 组件上下文
  // 参数2： 服务端事例
  nuxtServerInit({ commit }, { app }) {
    console.log('我在服务端执行了');
    // 重新给用户存值
    commit('user/init', 'store index token: 12345')
  }
};

插件 Plugins

---

plugins 可谓是nuxt必备必会的。**他和中间件有些类似，但是逻辑不通，他只会在事例创建之前执行一次。而中间每次路由切换都会执行；**开发中会经常涉及一下初始化工作，例如：安装插件，elementUI, 以及他的语言。或者设置axios 请求头携带took，或者给给她注入方法

演示案例 上下文中注入全局方法：

1. 在plugins 文件夹中 创建 api-inject.js

   /*
   *  参数1： 是vue上下文，我们可以结构取值想要的对象或属性。
   *  参数2： 注入函数
   * */
   export default ({ $axios }, inject) => {
     // 在这里注入一个全局方法 ,  那么以后我们在vue实例中即可用 this.$getCity 函数
     // 参数 【函数名称， 接受参数】
     inject("getCity", potions => {
       console.log(potions);
       const url = "https://shadow.elemecdn.com/lib/[email protected]/city_list.json"  
       return $axios.$get(url);
     });
   };
   

2. 在nuxt.config.js 中配置

   module.exports = {
   	...
   	plugins: [
           "@/plugins/api-inject"
         ],
   }
   

3. 可以在全局使用它：

   methods: {
       onGetCity() {
           this.$getCity('深圳').then(res => {
           	this.list = res
           })
       }
   }
   

演示案例 拦截axios请求 设置请求头token

1. 在plugins 文件中创建 interceptor.js 然后在 nuxt.config.js 配置

   // 1 interceptor.js中定义函数
   export default function({ $axios, store }) {
     // onRequest 是请求之前执行函数 详细文档： @nuxt-axios
     $axios.onRequest(config => {
       if (store.state.user.token) {
         console.log('请求之前 token：', store.state.user.token);
         // config.headers.Authorization = "Bearer " + store.state.user.token;
       }
       return config;
     });
     
     // 请求响应 
     $axios.onResponse(config=>{
         //判断请求回来的code 
         ....
         return config;
     }) 
   }
   
   // 2 nuxt.config
   plugins: [
           "@/plugins/api-inject",
           "@/plugins/interceptor",
         ],
   
   

项目部署发布

当我项目完成时候，需要打包上线。发布到外网。nuxt提供2中方式打包。

1. 服务端渲染应用部署

   他会以往vue打包部署很相似。打包后生成的文件在 .next/dist 目录中

   npm run build
   npm start
   

   如何你电脑就是服务器 那么使用nginx 代理端口后，执行完事。外网可以访问了，提前你服务器装node

2. 静态应⽤部署

   这种方式会每个页面都打包出一和html页面。提前是 渲染和接⼝服务器都需要处于启动状态 这样打包的话效率很好，因为服务端已经渲染过浏览器不用重新渲染。 生成文件在 根目录/dist 中

   npm run generate
   

   导报出来的文件，就和我们Jquery时代的目录差不多了，都是html页面

开发中额外注意点

• 首屏时候看不到浏览器的接口请求，原因：首屏已经服务端执行了，所以不同浏览执行