node.js - Nuxt.js与Expresss Generator应用程序

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

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

谁能给我有关nuxt.js的Express应用程序（由Express Generator生成）的适当教程

最佳答案

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

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

NUXT.js x Express.js

1.快速生成器并安装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文件夹


纽克斯


资产
组件
布局
中间件
页数
外挂程式
静态的
商店



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

关于node.js - Nuxt.js与Expresss Generator应用程序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47550479/