Vite初始化Vue3+Typescrpt项目

初始化项目

安装 Vite

首先，确保你的 Node.js 版本 >= 12.0.0。然后在命令行中运行以下命令来创建一个 Vite + Vue 3 + TypeScript 的项目模板：

npm init vite@latest

在这里插入图片描述

进入项目目录

创建完成后，进入项目目录：

cd vue3-demo

启动开发服务器

在项目目录中，使用以下命令启动开发服务器：

npm run dev

项目结构

以下是项目的基本目录结构：

├── publish/
└── src/├── assets/                    // 静态资源目录├── components/                // 公共组件目录├── hooks/                     // hooks函数目录├── plugins/                   // 插件目录├── router/                    // 路由配置目录├── store/                     // 状态管理目录├── styles/                    // 通用 CSS 目录├── utils/                     // 工具函数目录├── views/                     // 页面组件目录├── App.vue├── main.ts
├── tests/                         // 单元测试目录
├── index.html
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json

TypeScript 配置

安装 Node 类型定义

如果你需要在项目中使用 Node.js 的类型定义，你可以安装 @types/node：

npm install @types/node --save-dev

或者在 tsconfig.json 中添加：

"types": ["node"
]

tsconfig.json

以下是 tsconfig.json 的配置内容：

{"compilerOptions": {"target": "esnext","module": "esnext","moduleResolution": "node","esModuleInterop": true,"strict": true,"jsx": "preserve","experimentalDecorators": true,"allowSyntheticDefaultImports": true,"sourceMap": true,"baseUrl": ".","types": ["node"],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.vue"],"exclude": ["node_modules"]
}

路由配置

安装 Vue Router

安装 Vue Router 4：

npm install vue-router@4

配置路由

创建 src/router/index.ts 并添加以下内容：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'HelloWorld',component: HelloWorld,}
]const router = createRouter({history: createWebHistory(),routes
})export default router

在 main.ts 中使用路由

在 src/main.ts 中添加以下代码来使用路由：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router).mount('#app')

状态管理

安装 Pinia

安装 Pinia 作为状态管理库：

npm install pinia

在 main.ts 中使用 Pinia

在 src/main.ts 中添加以下代码来使用 Pinia：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'const app = createApp(App)
const pinia = createPinia()
app.use(router).use(pinia).mount('#app')

样式预处理器

安装 Sass

安装 Sass 作为 CSS 预处理器：

npm i sass -D

安装 Element Plus

在项目根目录下打开命令行工具，运行以下命令来安装 Element Plus：

npm install element-plus

完整引入

一次性引入 Element Plus 的所有组件和样式，在 main.ts 文件写入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(router)
app.use(createPinia())
app.use(ElementPlus)app.mount('#app')

一般不推荐这种写法，因为打包后的文件太大，下面介绍官方推荐的方法

按需引入

如果你想要按需引入 Element Plus 的组件和样式，你需要安装额外的插件 unplugin-vue-components 和 unplugin-auto-import 来实现自动导入。

首先，安装这两个插件：

npm install unplugin-vue-components unplugin-auto-import -D

然后，在 vite.config.ts 文件中配置它们：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

这样配置后，你就可以在组件中直接使用 Element Plus 的组件，而不需要在每个文件中单独导入。

附：

禁用 Vetur 插件，安装 Volar 插件。