The Pragmatic Studio

Create, Build, and Serve Apps with the Vue CLI

November 19, 2018

We just finished building a single-page Vue app for our Unpacked: Single-Page App course. We used the Vue CLI to generate the initial app and serve it up during development. This video shows how we did that, and also walks through the generated app so you feel confident about using the Vue CLI as a starting point.

Here’s a quick recap of the commands we used in the video to create, build, and serve a Vue app:

  1. Create a new project:

    vue create my-app
    
  2. Build and serve the generated app on your local machine:

    cd my-app
    
    npm run serve
    
  3. Build the app for production:

     npm run build
    

    This bundles everything in the dist directory which is ready to be deployed on your favorite static file server!

  4. To preview the production build locally using the serve NPM package:

    serve -s dist
    

For more details on using the Vue CLI, check out the official documentation.

Unpack a Vue + Rails API App Layer-By-Layer

Learn what it takes to put together a single-page web app using Vue.js backed by a Rails API in our Unpacked: Single-Page App course. No need to piece together solutions yourself. Use this full-stack application as a springboard for creating your own apps!