博客

2017年跟着教程做了一个全栈的商场(vue + express + mongodb)，2019年，工作中一直做前端，之前学过的都忘了，所以准备用 Nuxt + koa2 + mongodb 重写一次。温故而知新，会增加一些功能，让这个项目更完善，适合初入全栈的前端工程师参考练手。小白看起来会比较吃力，这文档里就是点了几处需要注意的东西，具体实现看源码。

源码地址：

https://github.com/FinGet/koa-nuxt-mall

,还过得去的话，斗胆请各位看官赏个star。

文档地址：

https://finget.github.io/2019/08/06/nuxt-koa-mongodb/

项目目录

先来看看整个项目的目录结构，不容易迷路。

├── .nuxt     # nuxt 编译的文件
├── assets    # 静态资源
├── components # 组件
│   └── banner.vue        # 轮播图组件
│   └── footer.vue        # footer组件
│   └── goods.vue         # 首页商品组件
│   └── search.vue        # 搜索组件
│   └── topBar.vue        # topBar组件
│   └── user.vue          # 用户信息组件
├── layout
│   ├── default.vue       # 默认布局文件
├── middleware            # 中间件
│   ├── auth.js           # 用户是否登录
└── pages
│   └── detail            
│       └── _id.vue       # 商品详情页
│   └── cartLists.vue     # 购物车页
│   └── form_mixins.js    # 登录注册表单验证mixins
│   └── index.vue         # 首页
│   └── login.vue         # 登录页
│   └── register.vue      # 注册页
└── plugins
│   └── axios.js          # axios配置
│   └── element-ui.js     # elementui
│   └── filters.js        # 过滤器
└── store
│   └── index.js          # vuex状态管理
└── server                # koa服务端
│   └── dbs               # mongodb数据库配置
│       └── models        # models
│           └── banner.js # 轮播图model
│           └── goods.js  # 商品model
│           └── user.js   # 用户model
│       └── config.js     # 数据库配置连接
│   └── routers           # 服务端路由
│       └── banner.js     # 轮播图路由
│       └── goods.js      # 商品路由
│       └── users.js      # 用户路由
│   └── utils             # 工具函数
│       └── passport.js   # passport登录验证中间件
│   └── index.js          # 服务端入口
└── static  
└── nuxt.config.js        # nuxt配置文件

安装运行项目

这个项目中要用到Mongodb，所以必须安装。

• Mac 安装mongodb

https://www.runoob.com/mongodb/mongodb-osx-install.html

• Windows 安装mongodb

https://www.runoob.com/mongodb/mongodb-window-install.html

• 克隆项目

https://github.com/FinGet/koa-nuxt-mall

install dependencies

yarn install

serve with hot reload at localhost:3000

yarn dev

build for production and launch server

yarn build

yarn start

generate static project

yarn generate

⚠️点这里：

Nuxt爬坑指南。

项目中还用到了Redis来存储session，也可以不用，直接存在内存中。

Redis安装指南。

从零开始手撸

Init Project

npx create-nuxt-app nuxt-koa-mall
// axios + koa + elementui + Eslint 就选这几样

• Install & SetUp Axios

// Install
yarn add @nuxtjs/axios


// SetUp nuxt.config.js 
modules: [
  '@nuxtjs/axios'
],
plugin: [
  '~/plugins/axios'
]
// plugins/axios.js
export default function ({
    $axios, redirect }) {
   
  $axios.onRequest(config => {
   
    console.log('Making request to ' + config.url)
  })
  $axios.onResponse(response => {
   
    // console.log(response)
    if(response.status == 200) {
   
      return response.data;
    }
  })
  $axios.onError(error => {
   
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
   
      redirect('/400')
    }
  })
}

• Install & SetUp Less

我不推荐用

sass

，反正我每次用

yarn

装

nodesass

都会有问题，弃坑！

// Install
yarn less less-loader @nuxtjs/style-resources

// SetUp nuxt.config.js 
modules: [
  '@nuxtjs/style-resources'
],
styleResources: {
   
  // 全局注入 less变量 这样在任何页面都可以使用 variate \ mixins
  less: ['./assets/css/variate.less','./assets/css/mixins.less']
},

官网说的⚠️ You cannot use path aliases here (~ and @)，你需要使用相对或绝对路径

Nuxt 开发页面

layouts 页面

默认情况下,

pages

的所有页面都会引入

/layouts/default.vue

,另外，

/layouts/error.vue

也会引入

default.vue

。可以定义一个空白layout：

black.vue

作为特殊页面的layout。

// 在页面中设置layout
export default {
   
  layout: 'blank' //默认是default
}

// 在layout中
<template>
  <div>
    <nuxt /> // 这个是必须定义的，就像是vue的router-view
  </div>
</template>

全局过滤器

Nuxt的全局过滤器，定义在plugins下面，在

nuxt.config.js

中引入。

// plugins/filters
import Vue from 'vue';

Vue.filter('moneyFormat', (value) => {
   
  return `${
     value}.00`
});

// nuxt.config.js
plugins: [
  '~/plugins/filters'
],

Nuxt路由

• 基础路由

在pages下面新建一个vue文件就会生成一个对应的路由，文件名就是路由名。

• 动态路由

在这个项目中，商品详情页就是动态路由。在

Nuxt.js

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

pages
--| detail/
-----| _id.vue

Nuxt.js 生成对应的路由配置表为:

router: {
   
  routes: [
    {
   
      name: 'detail-id',
      path: '/detail/:id?',
      component: 'pages/detail/_id.vue'
    },
  ]
}

更多路由配置去

官网查看

asyncData 和 fetch

• asyncData
  
  此方法在加载（渲染）组件（页面组件，即pages文件夹下的文件，不包含components下的）之前在服务端或路由更新之前被调用，即可以进行异步获取数据并返回当前组件。

• fetch
  
  该方法用于渲染页面（页面组件加载前被调用【服务端或切换至目标路由之前】）前填充应用的状态树（store）数据,与asyncData方法类似，不同的是它不会设置组件的数据。

如果组件不是和路由绑定的页面组件，原则上是不可以使用异步数据的。因为 Nuxt.js 仅仅扩展增强了页面组件的 data 方法，使得其可以支持异步数据处理。–简而言之就是

fetch

和

asyncData

在组件上不能用。

Vuex

⚠️在nuxt中，vuex需要导出一个方法。

let store = () => new Vuex.Store(