要搭建 Vite + Vue 3 + TypeScript 项目,请按照以下步骤进行操作:
安装 Node.js 和 npm:请确保您已经在计算机上安装了 Node.js,它附带了 npm 包管理器。您可以从 Node.js 官网 下载最新版本。
-
初始化项目:在终端中,进入您想要创建项目的文件夹,并键入以下命令:
npm init -y
这将使用默认选项初始化一个新的 npm 项目。
-
安装 Vue CLI:Vite 是 Vue CLI 的一个插件,因此需要使用 Vue CLI 初始化项目。运行以下命令安装 Vue CLI:
npm install -g @vue/cli
-
创建项目:在终端中,进入您想要创建项目的文件夹,然后运行以下命令:
vue create my-project-name
按照提示选择预设或手动配置。如果您选择手动配置,请务必选择 TypeScript 选项以启用 TypeScript 支持。
-
安装 Vite 插件:在项目文件夹中,运行以下命令安装 Vite 插件:
npm install --save-dev vite @vitejs/plugin-vue@next @vitejs/plugin-vue-jsx@next
-
配置 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 插件、解析别名和优化依赖项等。
-
修改启动命令:打开
package.json
文件并将"scripts"
对象中的"serve"
命令更改为:"scripts": { "serve": "vite" }
-
创建组件:在
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>
-
在 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>
-
运行项目:在终端中,进入项目文件夹并运行以下命令:
npm run serve
打开浏览器并导航到
http://localhost:3000
,您将看到应用程序正在运行并显示“Welcome to Your Vue.js + TypeScript App with Vite!”消息。
以上是使用 Vite + Vue 3 + TypeScript 创建项目的完整过程。您可以根据需要进行自定义和修改。