搭建vite + vue3 + ts项目的全过程

要搭建 Vite + Vue 3 + TypeScript 项目，请按照以下步骤进行操作：

1. 安装 Node.js 和 npm：请确保您已经在计算机上安装了 Node.js，它附带了 npm 包管理器。您可以从 Node.js 官网 下载最新版本。

2. 初始化项目：在终端中，进入您想要创建项目的文件夹，并键入以下命令：

   npm init -y
   

   这将使用默认选项初始化一个新的 npm 项目。

3. 安装 Vue CLI：Vite 是 Vue CLI 的一个插件，因此需要使用 Vue CLI 初始化项目。运行以下命令安装 Vue CLI：

   npm install -g @vue/cli
   

4. 创建项目：在终端中，进入您想要创建项目的文件夹，然后运行以下命令：

   vue create my-project-name
   

   按照提示选择预设或手动配置。如果您选择手动配置，请务必选择 TypeScript 选项以启用 TypeScript 支持。

5. 安装 Vite 插件：在项目文件夹中，运行以下命令安装 Vite 插件：

   npm install --save-dev vite @vitejs/plugin-vue@next @vitejs/plugin-vue-jsx@next
   

6. 配置 Vite：在项目文件夹根目录下创建一个名为 vite.config.ts 的文件，并添加以下内容：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import vueJsx from '@vitejs/plugin-vue-jsx';
   
   export default defineConfig({
     plugins: [vue(), vueJsx()],
     resolve: {
       alias: {
         // 添加你自己的路径别名
         '@': '/src'
       }
     },
     optimizeDeps: {
       include: ['vue', 'vue-router']
     }
   });
   

   这个文件定义了 Vite 的配置选项，包括 Vue 插件、解析别名和优化依赖项等。

7. 修改启动命令：打开 package.json 文件并将 "scripts" 对象中的 "serve" 命令更改为：

   "scripts": {
     "serve": "vite"
   }
   

8. 创建组件：在 src 目录下创建一个新的 .vue 文件，例如 HelloWorld.vue，并添加以下内容：

   <template>
     <div>{{ msg }}</div>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   
   export default defineComponent({
     name: 'HelloWorld',
     props: {
       msg: String
     }
   });
   </script>
   

9. 在 App.vue 中使用组件：打开 App.vue 文件，并添加以下代码：

   <template>
     <div id="app">
       <HelloWorld msg="Welcome to Your Vue.js + TypeScript App with Vite!" />
     </div>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   import HelloWorld from './components/HelloWorld.vue';
   
   export default defineComponent({
     components: {
       HelloWorld
     }
   });
   </script>
   

10. 运行项目：在终端中，进入项目文件夹并运行以下命令：

    npm run serve
    

    打开浏览器并导航到 http://localhost:3000，您将看到应用程序正在运行并显示“Welcome to Your Vue.js + TypeScript App with Vite!”消息。

以上是使用 Vite + Vue 3 + TypeScript 创建项目的完整过程。您可以根据需要进行自定义和修改。