node.js - Nuxt.js 与 Express 生成器应用程序

Question

我想将使用 Express 生成器生成的 Express 应用程序集成到我的 nuxt.js 应用程序中。

我找到了一个https://github.com/nuxt-community/express-template但其仅集成了简单的快速应用程序。

任何人都可以给我使用 nuxt.js 的 Express 应用程序(使用 Express 生成器生成)的正确教程

Answer 1

我最近将 NUXT 添加到我的 Express.js 应用程序中，这是我的设置示例。

https://github.com/iampaul83/express-nuxt

NUXT.js x Express.js

1。 Express 生成器并安装 nuxt

# express generator
npx express-generator --pug --git express-nuxt
cd express-nuxt
yarn

# nuxt
yarn add nuxt @nuxtjs/axios
yarn add --dev eslint babel-eslint eslint-friendly-formatter eslint-loader eslint-plugin-vue

2。添加 nuxt 文件夹

• 努克斯
  • Assets
  • 组件
  • 布局
  • 中间件
  • 页面
  • 插件
  • 静态
  • 商店

3。创建 nuxt.config.js

如果要将 nuxt 放在子文件夹中，则需要 srcDir 选项

module.exports = {
  mode: 'universal',

  srcDir: __dirname,
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },

  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

4。创建 nuxt-render.js 进行渲染

const { Nuxt, Builder } = require('nuxt')

const config = require('./nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

const nuxt = new Nuxt(config)

// build nuxt
if (config.dev) {
    const builder = new Builder(nuxt)
    builder.build().catch((error) => {
        console.log('failed to build nuxt')
        console.log(error)
    })
}

module.exports = nuxt.render

5。在app.js中添加nuxt渲染中间件

app.use(require('./nuxt/nuxt-render'));

6。添加.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {}
}

7。为 nuxt 添加 .gitignore

# Nuxt build
.nuxt

# Nuxt generate
dist