一、修改element Plus样式
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 0;
}
二、创建项目
-
确保你的开发环境已经安装了Node.js和npm(或者使用yarn)。
-
打开命令行工具,进入你要创建项目的目录。
-
创建一个新的Vue项目,并选择使用Vite作为构建工具:
-
npm init vite@latest
根据提示进行配置,选择Vue、TypeScript、Pinia和Element Plus等选项。
-
进入项目目录:
cd <project-name>
-
安装项目依赖:
npm install
-
安装axios和pinia库:
npm install axios pinia
-
安装Element Plus依赖:
npm install element-plus@next
-
在src目录下创建一个
api
文件夹来存放API请求相关的代码。 -
在src目录下创建一个
store
文件夹来存放Pinia状态管理相关的代码。 -
在src目录下创建一个
components
文件夹用于存放组件代码。 -
在src目录下创建一个
views
文件夹用于存放页面代码。 -
修改
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');
-
创建一个API请求的示例:
import axios from 'axios'; export function getUser(id: number) { return axios.get(`/api/user/${id}`); }
-
创建一个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; }, }, });
-
在组件中使用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>
-
在组件中使用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>
-
运行项目:
npm run serve
这样,你就成功创建了一个Vue 3 + Vite + TypeScript + Pinia + Axios + Element Plus的项目