vue和vite创建前端项目

一、使用vite创建项目

创建vite项目

npm init vite + 项目名称

选择一个框架

 ? Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 >   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架

是否使用ts

? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript
    Customize with create-vue ↗
    Nuxt ↗

  cd demo2
  npm install
  npm run dev

二、使用vue创建

npm init vue@latest

✔ Project name: … demo3				// 项目名称
✔ Add TypeScript? … No / Yes	  // 加入TypeScript组件
✔ Add JSX Support? … No / Yes   // 加入JSX支持
// 为单页应用程序开发添加Vue Router路由管理组件
✔ Add Vue Router for Single Page Application development? … No / Yes   
✔ Add Pinia for state management? › No / Yes   // 添加Pinia组件来进行状态管理
✔Add Vitest for Unit Testing? › No / Yes   // 添加端到端测试
✔Add an End-to-End Testing Solution? › Playwright   // 添加ui自动测试框架Playwright
✔Add ESLint for code quality? › No / Yes   // 添加ESLint来进行代码质量检查
✔Add Prettier for code formatting? › No / Yes   // 添加代码格式化工具

cd demo3
npm install
npm run format
npm run dev

三、两种方式对比

方式一：针对不同框架更灵活，但是具体组件需要单独配置

方式二：针对vue的，在创建的时候就可以选择配置了