Three ways to create a Vue3 project

Created using vue-cli

Official documentation: https://cli.vuejs.org/zh/guide/

vue-cli4.x is based on webpack4, vue-cli5.x is based on webpack5

## 安装或者升级你的@vue/cli
npm install -g @vue/cli

## 创建
vue create vue3_cli           //vue_stduy_cli为自定义文件名                

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

Created with crate-vite

Official document: https://vitejs.cn/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 and react.
use npm

npm create vite@latest

npm create is an alias of npm init npm init vite@latest also works
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

Use create-vue to create

https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

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

npm init vue@latest

npm create is an alias of npm init npm create vue@latest also takes effect

✔ 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.

Template directory structure after selecting Yes


├─ cypress
├─ public
│  └─ favicon.ico
├─ src
│  ├─ App.vue
│  ├─ assets
│  ├─ components
│  ├─ main.ts
│  ├─ router
│  │  └─ index.ts
│  ├─ stores
│  │  └─ counter.ts
│  └─ views
│     ├─ AboutView.vue
│     └─ HomeView.vue
├─ tsconfig.app.json
├─ tsconfig.config.json
├─ tsconfig.json
├─ tsconfig.vitest.json
└─ vite.config.ts
├─ .eslintrc.cjs
├─ .gitignore
├─ .prettierrc.json
├─ cypress.config.ts
├─ env.d.ts
├─ index.html
├─ package.json

Guess you like

Origin blog.csdn.net/weixin_46769087/article/details/127917546
Recommended