Vue3项目的三种创建方式

使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/

vue-cli4.x是基于webpack4的，vue-cli5.x是基于webpack5的

## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue3_cli           //vue_stduy_cli为自定义文件名                

根据我们的需求选择对应的模板

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

使用crate-vite 创建

官方文档：https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project

crate-vite是vite官方提供的官方脚手架，可以创建vue、react等框架的项目模板。
使用npm

npm create vite@latest

npm create 是 npm init 的别名 npm init vite@latest同样生效
使用 Yarn:

yarn create vite 

使用 PNPM:

pnpm create vite

根据我们的需求选择对应的模板

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-vue创建

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

这是vue官方提供的vue项目构建工具，基于vite

npm init vue@latest

npm create 是 npm init 的别名 npm create vue@latest同样生效

✔ 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 / YesScaffolding project in ./<your-project-name>...Done.

全选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

本文链接：https://www.kjpai.cn/news/2024-04-09/155968.html，文章来源：网络cs，作者：峨乐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！