搭建工程

创建工具	Vue CLI	Vite
构建工具	Webpack	基于原生 ESM + Rollup
启动速度	较慢（需打包整个应用）	极快（按需编译，无需打包）
热更新（HMR）	较慢（Webpack 重构建）	极快（原生 ESM 直接更新）
配置文件	vue.config.js	vite.config.js
Vue 版本支持	默认 Vue 2（可选 Vue 3）	默认 Vue 3（兼容 Vue 2）
TypeScript 支持	需额外配置	开箱即用
生态扩展	通过 Webpack 插件	通过 Vite 插件（轻量级）

Vue CLI

是 Vue.js 官方提供的脚手架工具，适合中大型项目，提供标准化配置和丰富的插件系统

# 查看@vue/cli版本，保证@vue/cli版本在4.5.0以上
vue --version
vue -V
npm install -g @vue/cli
vue create my-project

Vite

Vite 是新一代前端构建工具，由 Vue.js 作者尤雨溪开发，主打极速启动和高效开发体验

npm create vue@latest  # 官方推荐方式（Vue 3）
# 或
npm init vite@latest my-project --template vue

vue2+ts 配置问题

• 提示找不到模块“../views/AboutView.vue”或其相应的类型声明。ts(2307)

  根目录创建shims-vue.d.ts文件

  用来告诉 TypeScript 如何识别 .vue 单文件组件（SFC）。它的作用是解决在 TypeScript 项目中导入 .vue 文件时出现的 "找不到模块" 或 "类型错误" 问题。

  declare module "*.vue" {
    import { DefineComponent } from "vue";
    const component: DefineComponent<{}, {}, any>;
    export default component;
  }
  

• 提示Module '"./components/HelloWorld.vue"' has no default export.Vetur(1192)

  禁用Vetur插件(针对 vue2)，安装 Vue - Official插件