Skip to content

Latest commit

 

History

History
113 lines (84 loc) · 2.57 KB

README.md

File metadata and controls

113 lines (84 loc) · 2.57 KB
Raw

Vite, Vue 3, Vuetify 2, Pinia 2, Typescript Starter Template

Features

  • Vue 2.7 + Vuetify, Typescript, Pinia,
  • Vite for the frontend build tooling, instead of Vue Cli
  • Using Composition API syntax from Vue 2(see the official Script Setup documentation)
  • Pulling up API requests using axios
  • Eslint for code styling
  • Pinia for state management
  • Using the NHTSA's vPIC API 3rd party library for API integration
  • // Unit tests with Vitest and Vue test utils
  • // Cypress.io e2e tests (configured similarly to vue-cli)
  • // Cypress.io component tests

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Getting Started

Prerequities

Yarn

npm install --global yarn

Typescript

yarn global add typescript

Environmane Variables

In a project, that contains a .env.example file. You can use the below command to use these environment variables to run.

cp .env.example .env

Build, run, lint

Install dependencies

yarn install

# Using npm
npm install

# Using Yarn
yarn

Compile and Hot-Reload for Development

# Using npm
npm run dev

# Using Yarn
yarn dev

Type-Check, Compile and Minify for Production

# Using npm
npm run build

# Using Yarn
yarn build

Run Unit Tests with Vitest

# Using npm
npm run test:unit

# Using Yarn
yarn test:unit

Run End-to-End Tests with Cypress

# Using npm
npm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing

# Using Yarn
yarn build
yarn test:e2e

Lint with ESLint

  # Using npm
  npm run lint

  # Using Yarn
  yarn lint