vue-cli-plugin-express

vue-cli 3 plugin to add an Express Api

vue-cli-plugin-express

:rocket: Add an API in your Vue application in 2 minutes!

This is a vue-cli 3.x plugin to add an Node Express server in your Vue project.



:star: Features:

  • Included fully customizable Express Server:
    • Just add your api routes into your project (with import/export support) without thinking to something else.
    • Optional automatic fallback to the Vue app, to serve both the api and the application with only one command.
    • Optional socket.io support.
  • (soon) Included optional example routes and components.

Table of contents


Getting started

:warning: Make sure you have vue-cli 3.x.x:

vue --version

If you don't have a project created with vue-cli 3.x yet:

vue create my-new-app

Navigate to the newly created project folder and add the cli plugin:

cd my-new-app
vue add express

Soon: :information_source: An example APIExample.vue component will be added into your sources if you chose to include the examples.

Usage

To start your server for development purpose, use this commands:

yarn express

The server will be automatically restarted when a change is detected.

You just then have to start the app:

yarn serve

To run the server only once for production use, run:

yarn express:run

Updating vue-cli-plugin-express will update the Express server service :+1:

Injected Commands

  • vue-cli-service express:watch

    Run the Express server with info from ./srv and watch the files to restart itself automatically.

  • vue-cli-service express:run

    Run the Express server with info from ./srv once.

Configuration

The Express Server can be configured via the pluginOptions in vue.config.js:

module.exports = {
  // Other options...
  pluginOptions: {
    // Express-related options
    express: {
        shouldServeApp: true,
        serverDir: './srv',
      },
    },
  },
}

Use your app in production

Move @vue/cli-service from devDependenciesto dependencies.

Execute the following commands:

yarn build
yarn express:run

For most of cloud hosting services, you can add a start command that will be triggered automatically:

{
  "scripts": {
    "start": "yarn express:run" 
  }
}

HomePage

https://github.com/mathieutu/vue-cli-plugin-express#readme

Repository

git+https://github.com/mathieutu/vue-cli-plugin-express.git


公众号

欢迎 JavaScript 爱好者