1.使用 vue-cli 创建

## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create helloworld

然后的步骤:

• Please pick a preset - 选择 Manually select features
• Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
• Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
• Use class-style component syntax - 直接回车
• Use Babel alongside TypeScript - 直接回车
• Pick a linter / formatter config - 直接回车
• Use history mode for router? - 直接回车
• Pick a linter / formatter config - 直接回车
• Pick additional lint features - 直接回车
• Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
• Save this as a preset for future projects? - 直接回车

运行：

npm run serve

控制台出现以下信息说明项目启动成功：

 DONE  Compiled successfully in 1754ms                                                                                                       上午12:02:13


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.3.21:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

项目首页效果如下：

2.使用vite创建 vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，

它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

• 快速的冷启动，不需要等待打包操作；
• 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
• 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

步骤如下：

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

运行：

npm run dev

项目启动首页效果如下：

vue-cli与vite对比