一、使用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的,在创建的时候就可以选择配置了