vite搭建一个vue3

1. 安装vite

首先，需要在命令行中安装vite。可以使用以下命令：

npm install vite -g

2. 创建一个新的vue3项目

使用以下命令创建新的vue3项目：

npm init vite@latest my-vue3-app --template vue

其中，my-vue3-app是项目名称，可以替换成任意名称。

3. 安装依赖

进入项目目录，使用以下命令安装项目依赖：

cd my-vue3-app
npm install

4. 启动项目

使用以下命令启动项目：

npm run dev

5. 访问项目

在浏览器中访问http://localhost:3000，即可看到vue3项目的欢迎页面。

以上就是使用vite快速搭建vue3项目的步骤。

相关问题

vite搭建一个vue3项目

要搭建一个Vue3项目，需要先安装Vue CLI。以下是步骤：

1. 安装Node.js，可以在官网下载安装包，也可以使用包管理工具安装。

2. 安装Vue CLI，可以使用npm命令行工具，在终端中输入以下命令：

npm install -g @vue/cli

3. 创建一个新的Vue项目，可以在终端中输入以下命令：

vue create my-project

其中，my-project是项目名称，可以根据需要进行修改。执行该命令后，会提示选择配置项，可以选择默认配置或自定义配置。

4. 进入项目目录，并启动开发服务器，可以在终端中输入以下命令：

cd my-project
npm run serve

5. 打开浏览器，访问http://localhost:8080，即可看到Vue3项目的欢迎页面。

以上就是搭建Vue3项目的基本步骤。可以根据具体需要，进行相关配置和开发。

搭建一个vue3 + ts + vite 步骤

搭建 Vue3 + TypeScript + Vite 的步骤如下：

1. 安装 Node.js

2. 安装 Vue CLI

npm install -g @vue/cli

3. 创建 Vue3 项目

vue create my-project

4. 选择手动配置，勾选 TypeScript 并确认

5. 安装 Vite

npm install -D vite

6. 将 package.json 中的 `"scripts"` 配置修改为：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

7. 将 `main.js` 改为 `main.ts`，并在其中引入 Vue：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

8. 在 `tsconfig.json` 中添加以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"]
}

9. 在 `vite.config.js` 中添加以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 配置 @ 指向 src 目录
    }
  }
})

10. 运行项目

npm run dev