创建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 <project-name>

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状态管理：

    <template> <div> <button @click="fetchUser">Fetch User</button> <div v-if="user">{{ user.name }}</div> </div> </template> <script> import { ref, useUserStore } from 'pinia'; import { getUser } from '@/api'; export default { setup() { const userStore = useUserStore(); const user = ref(null); async function fetchUser() { const response = await getUser(1); user.value = response.data; } return { fetchUser, user: userStore.user, // 使用Pinia状态管理 }; }, }; </script>

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

    <template> <div> <el-button @click="fetchUser">Fetch User</el-button> <el-card v-if="user"> <p>Name: {{ user.name }}</p> <p>Email: {{ user.email }}</p> </el-card> </div> </template> <script> import { ref, useUserStore } from 'pinia'; import { getUser } from '@/api'; export default { setup() { const userStore = useUserStore(); const user = ref(null); async function fetchUser() { const response = await getUser(1); user.value = response.data; } return { fetchUser, user: userStore.user, }; }, }; </script> <style> /* 在这里可以引入Element Plus的样式 */ </style>

18. 运行项目：

    npm run serve

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