Vue CLI and Single Page Application (SPA) Setup

Introduction

• Presenter: Mike from The Pragmatic Studio
• Topic: Building a single-page application (SPA) using Vue CLI

Setting Up the Project

Installing Vue CLI

• Use npm or yarn to install the Vue CLI.
• The command is vue create <app-name>.
• Example: vue create my-app
• Option to use default settings or manually select features.

Manually Selecting Features

• Selected features for this project:
  • Babel
  • Router (for SPA routing)
  • Vuex (for client-side state management)
  • Sass (CSS preprocessor)
  • ESLint + Prettier (for linting and formatting)
• Configuration storage options: Dedicated config files or package.json

Building and Serving the App

• Go to the project directory: cd my-app
• Run development server: npm run serve
• Access app in browser at the URL provided (usually http://localhost:8080)

Project Structure

Directories and Files

• public: Contains static assets (e.g., favicon) that do not get processed by Webpack.
• src: Contains application code.
  • assets: Static assets processed by Webpack.
  • components: Vue components.
  • views: Vue files for specific views/pages (created if Router is selected).
  • main.js: Entry point, initializes Vue instance, imports components.
  • router.js: Defines routes and maps them to components.
  • store.js: Initializes Vuex store for state management.

Main Files and Code

• index.html in public directory: Contains div with id app for Vue mounting.
• main.js:
  • Imports Vue, App component, Router, and Store.
  • Creates Vue instance, renders App component, mounts it to #app.
• App.vue:
  • Template section: Contains router links and components.
  • Style section: Contains styles for the App template.
• Router (router.js): Manages different routes and components mapping.
• Vuex Store (store.js): State management for the application.

Development and Hot Reloading

• Modifying components reloads the app dynamically.
• Example: Changing a heading text in a view or component will instantly update the app in the browser.

Production Build

• Build app for production: npm run build
• Uses Webpack for optimized build.
• Creates production-ready bundle (placed in dist directory):
  • chunk-vendors.js: Vendor libraries
  • app.js: Application code
  • app.css: CSS
• Supports lazy loading for routes (e.g., separate chunk for About page in the example).

Deployment

• Deploy the contents of dist directory to a static file server.
• Example: Using serve NPM package to preview production build locally:
  • Command: serve -s dist
  • Access URL provided by serve.

Conclusion

• Vue CLI simplifies SPA development, providing sensible defaults and all necessary configuration.
• Folder and file structure facilitates easy setup and scaling of applications.

Additional Resources

• The Pragmatic Studio courses for deeper insights and practical examples on using Vue in real-world applications.