vue3+vite+Ts+pinia搭建一个项目（详细教程）

前言

        Vue 3 相对于之前版本的新特性和改进，例如性能优化、开发体验改进、新的功能等。这些特性可能是开发者使用 Vue 3 的动力和吸引点。

        Vue 3 在设计时所遵循的原则和理念。这些原则可以涉及到性能、可扩展性、易用性等方面，帮助读者了解 Vue 3 的核心价值和目标

---

提示：node和npm这个就不解释了，安装版本16以上的基本就ojbk了,这里推荐一个好玩的node管理工具  nvm  自己慢慢去了解了。

一、（第一种只能搭建简单点的项目目录简单）创建底层项目，

1.初始化环境  安装更新vue3.0

npm install -g @vue/cli

2.创建项目

 npm init vite@latest

 

二、第二种可以搭建较为全面的项目目录）创建底层项目，

1.初始化环境  安装更新vue3.0

npm install -g @vue/cli

2.创建项目

 npm init vue@latest

 

三.自动引入vue插件

下载插件

npm i -D unplugin-auto-import

vite.config.ts 引入，这样只可以在页面直接使用ref之类的插件，无需在页面在单独引入。

import AutoImport from "unplugin-auto-import/vite";
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
  ],

---

总结

1. 更高的性能：Vue 3 使用了更现代化的响应式系统，通过使用 Proxy 对象替代 Object.defineProperty，减少了不必要的计算和监听，提升了性能。

2. 更小的体积：Vue 3 经过重新设计和优化，使得库的体积更小，加载速度更快。它还与现代打包器（如 Webpack）更好地配合，实现了更好的 Tree-shaking 效果。

3. Composition API：Vue 3 引入了 Composition API，提供了一种更灵活和直观的方式来组织和复用组件逻辑。这使得开发者可以更好地组合和重用代码，提高了代码的可维护性。

4. 更好的 TypeScript 支持：Vue 3 在设计时考虑了 TypeScript 的支持，提供了更好的类型推断和类型检查。这使得在使用 TypeScript 开发时更加友好和高效。

5. 改进的开发者工具支持：Vue 3 对开发者工具进行了升级，提供了更好的调试和性能分析支持，使得开发过程更加高效和方便。

6. 兼容性考虑：尽管 Vue 3 做了许多重大改进，但它仍然保持了与 Vue 2 的高度兼容性。这意味着现有的 Vue 2 项目可以平滑升级到 Vue 3，同时还能享受到新版本的好处。