3 code examples of creation methods for Vue3 project

Created with vue-cli

Official Documentation:/zh/guide/

It is based on webpack4 and is based on webpack5

## Install or upgrade your @vue/clinpm install -g @vue/cli

## Createvue create vue3_cli           //vue_stduy_cli is a custom file name

Select the corresponding template according to our needs

Vue CLI v5.0.8
? Please pick a preset:
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Create with crate-vite

Official Documentation:/vite3-cn/guide/#scaffolding-your-first-vite-project

crate-vite is the official scaffolding provided by Vite, which can create project templates for frameworks such as vue, react, etc.

Using npm

npm create vite@latest

npm create is an alias for npm initnpm init vite@latestAlso effective

Using Yarn:

yarn create vite 

Using PNPM:

pnpm create vite

Select the corresponding template according to our needs

PS C:\Users\Administrator\Desktop> npm create vite@latest
√ Project name: ... vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

Create with create-vue

/guide/#creating-a-vue-application

This is the vue project construction tool provided by vue, based on vite

npm init vue@latest

npm create is an alias for npm initnpm create vue@latestAlso effective

✔ Project name: … <your-project-name>
✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

The template directory structure after selecting all Yes

├─ cypress
├─ public
│  └─
├─ src
│  ├─
│  ├─ assets
│  ├─ components
│  ├─
│  ├─ router
│  │  └─
│  ├─ stores
│  │  └─
│  └─ views
│     ├─
│     └─
├─
├─
├─
├─
└─
├─ .
├─ .gitignore
├─ .
├─
├─
├─
├─

Summarize

This is the end of this article about the three ways to create Vue3 projects. For more related content on creating Vue3 projects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!