初始化vue3和vite项目
时间: 2023-12-23 13:25:32 浏览: 36
以下是初始化Vue3和Vite项目的步骤:
1. 首先,确保你已经安装了最新版本的Node.js和npm包管理器。
2. 打开终端并输入以下命令来安装Vue CLI :
```
npm install -g @vue/cli
```
3. 创建一个新的Vue项目:
```
vue create my-project
```
4. 在创建项目时,选择手动配置并选择Vue 3作为默认的Vue版本。
5. 安装Vite:
```
npm install -g vite
```
6. 在项目根目录下创建一个vite.config.ts文件,并添加以下内容:
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})
```
7. 在项目根目录下创建一个tsconfig.json文件,并添加以下内容:
```json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["vite/client"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules", "dist"]
}
```
8. 运行以下命令来启动Vite服务器:
```
vite
```
9. 打开浏览器并访问http://localhost:3000,你应该能够看到一个Vue 3应用程序正在运行。