初始化项目
安装 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 插件。
- 在ts文件里会出现导入 vue 文件后，提示 找不到模块‘xxx.vue’或其相应的类型声明
解决方式：
在项目根目录新建一个 xx.d.ts
declare module '*.vue' {import { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions
}
