创建vue3+vite+ts+pinia+axios+element plus 项目和修改样式

一、修改element Plus样式

:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 0;
	}

二、创建项目

1. 确保你的开发环境已经安装了Node.js和npm（或者使用yarn）。

2. 打开命令行工具，进入你要创建项目的目录。

3. 创建一个新的Vue项目，并选择使用Vite作为构建工具：

4. npm init vite@latest

   根据提示进行配置，选择Vue、TypeScript、Pinia和Element Plus等选项。

5. 进入项目目录：

   cd

6. 安装项目依赖：

   npm install

7. 安装axios和pinia库：

   npm install axios pinia

8. 安装Element Plus依赖：

   npm install element-plus@next

9. 在src目录下创建一个api文件夹来存放API请求相关的代码。

10. 在src目录下创建一个store文件夹来存放Pinia状态管理相关的代码。

11. 在src目录下创建一个components文件夹用于存放组件代码。

12. 在src目录下创建一个views文件夹用于存放页面代码。

13. 修改main.ts文件，引入Pinia并创建Pinia实例：

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

14. 创建一个API请求的示例：

    import axios from 'axios'; export function getUser(id: number) { return axios.get(`/api/user/${id}`); }

15. 创建一个Pinia状态管理的示例：

    import { defineStore } from 'pinia'; export const useUserStore = defineStore('user', { state() { return { user: null, }; }, actions: { async fetchUser(id: number) { const response = await getUser(id); this.user = response.data; }, }, });

16. 在组件中使用API和Pinia状态管理：

17. 在组件中使用Element Plus组件：

18. 运行项目：

    npm run serve

这样，你就成功创建了一个Vue 3 + Vite + TypeScript + Pinia + Axios + Element Plus的项目