vue_javascript_001

This template should help get you started developing with Vue 3 in Vite.

output browser of this template

run with default command :

npm run test:e2e:dev

you can write your cypress test , I wrote my own test with cypress no other nodejs packages.

the result is the same as the template vue_typescript_001

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Headed Component Tests with Cypress Component Testing

npm run test:unit:dev # or `npm run test:unit` for headless testing

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint

These commands from my terminal :

C:\>mkdir VueProjects

C:\>cd VueProjects

C:\VueProjects>npm create vue@latest

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue_javascript_001
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » Cypress
√ Add ESLint for code quality? » Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in C:\VueProjects\vue_javascript_001...

Done. Now run:

  cd vue_javascript_001
  npm install
  npm run dev


C:\VueProjects>cd vue_javascript_001

C:\VueProjects\vue_javascript_001>npm install

added 416 packages, and audited 417 packages in 25s

111 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

C:\VueProjects\vue_javascript_001>npm install

added 416 packages, and audited 417 packages in 25s

111 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


  VITE v6.0.7  ready in 1494 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help