Nuxt.js

这是类似于 Next.js(React)的一个渐进式框架。虽然支持 SSR(服务器端渲染),但我们依然可以只将其作为前端框架来实现前后端分离的中、小型项目。

文档不建议查看中文版本,因为比较老旧(更新本文时目前英文版本1.4.0而中文版本还停留在0.10.7

配置关闭 SSR

nuxt.config.js

module.exports = {
  mode: 'spa',
  build: {
    ssr: false
  }
  // 其他配置项
};

下面从几个简单的实讲解各个核心功能的使用。

插件 Plugins

实现 router.beforeEach 钩子:

// /plugins/router.js
export default ({ app }) => {
  app.router.beforeEach((to, from, next) => {
    app.store.dispatch('set', { key: '$page', data: `${to.name}` });
    return next();
  });
};

其他示例:

Store(Vuex)

子模块状态管理: https://nuxtjs.org/guide/vuex-store#modules-mode

// /store/todos.js
export const state = () => ({
  list: []
});

export const mutations = {
  add(store, text) {
    store.list.push({
      text,
      done: false
    });
  },
  remove(store, { todo }) {
    store.list.splice(store.list.indexOf(todo), 1);
  },
  toggle(store, todo) {
    // eslint-disable-next-line no-param-reassign
    todo.done = !todo.done;
  }
};

需要注意的是:

/store/index.js 需要以类似的结构抛出,即:

// /store/index.js
export const state = () => ({

});

export const mutations = {

};

// export const ...

中间件 Middlewares

// middleware/authenticate.js
export default ({ store, redirect }) => {
  const user = store.getters['user/user'];
  if (user === null || (parseInt(new Date() / 1000, 10) - user.expires > 0)) {
    return redirect('/login');
  }
};

使用(layout、pages或components中):

// 以 layouts/dashboard.vue 为例
export default {
  name: 'Layout',
  middleware: 'authenticate',
  // ...
};

可以是访问特定路由或者组件时触发。类似于 beforeRouterEnter 之类的钩子。