Nuxt.js与expresss生成器应用程序

Question

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

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

任何人都可以使用nuxt.js

为我提供适当的快速应用教程（使用快速生成器生成）

Answer 1

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

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个文件夹

• 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