Skip to content

Latest commit

 

History

History
122 lines (83 loc) · 3.77 KB

development.md

File metadata and controls

122 lines (83 loc) · 3.77 KB
Raw

Setup and development

First-time setup

Make sure you have the following installed:

  • Node (at least the latest LTS)
  • Yarn (at least 1.0)

Then update the following files to suit your application:

  • src/app.config.js (provides metadata about your app)
  • .circleci/config.yml (assuming you want to automatically deploy to production with continuous integration)

Installation

# Install dependencies from package.json
yarn install

Dev server

Note: If you're on Linux and see an ENOSPC error when running the commands below, you must increase the number of available file watchers.

# Launch the dev server
yarn dev

# Launch the dev server and automatically open it in
# your default browser when ready
yarn dev --open

# Launch the dev server with the Cypress client for
# test-driven development in a friendly interface
yarn dev:e2e

Developing with the production API

By default, dev and tests filter requests through the mock API in tests/mock-api. To test directly against a local/live API instead, run dev and test commands with the API_BASE_URL environment variable set. For example:

# To develop against a local backend server
API_BASE_URL=http://localhost:3000 yarn dev

# To test and develop against a production server
API_BASE_URL=https://example.io yarn dev:e2e

Generators

This project includes generators to speed up common development tasks. Commands include:

# Generate a new component with adjacent unit test
yarn new component

# Generate a new view component with adjacent unit test
yarn new view

# Generate a new layout component with adjacent unit test
yarn new layout

# Generate a new Vuex module with adjacent unit test
yarn new module

# Generate a new utility function with adjacent unit test
yarn new util

# Generate a new end-to-end spec
yarn new e2e

Update existing or create new generators in the _templates folder, with help from the Hygen docs.

Webpack

To resolve the webpack configuration in your IDE you should use the following path:

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

To see the whole webpack configuration run the inspect command:

vue inspect

or put it into a file:

vue inspect > output.js

::: warning output.js isn't a valid webpack configuration because of

function () { /* omitted long function */ }

:::

Aliases

To simplify referencing local modules and refactoring, you can set aliases to be shared between dev and unit tests in aliases.config.js. As a convention, this project uses an @ prefix to denote aliases.

Globals

Base components

Base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with the _base- prefix. Since these components are typically used in place of raw HTML element (and thus used as frequently), they're automatically globally registered for convenience. This means you don't have to import and locally register them to use them in templates.