Vue3+ElementPlus+pinia 小案例

Vue3+ElementPlus+pinia 小案例

1、初始化项目

使用脚手架快速创建Vue3应用：https://cli.vuejs.org/zh/

脚手架自动整合了vue-router路由、ts、前端工程化等库；

安装脚手架工具

npm install -g @vue/cli

检测安装是否成功

vue -V

创建项目：

vue create 项目名称

安装依赖

cd 项目名称
npm install
npm install element-plus
npm install pinia
npm vue-router

2、设置目录结构

3、配置Pinia

创建一个Pinia store来管理用户状态

// src/store/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    role: null,
  }),
  actions: {
    login(user, role) {
      this.user = user;
      this.role = role;
    },
    logout() {
      this.user = null;
      this.role = null;
    }
  }
});

4、配置路由

配置路由来处理页面跳转

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Admin from './views/Admin.vue';
import User from './views/User.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/admin', component: Admin },
  { path: '/user', component: User },
  { path: '/login', component: Login },
  { path: '/register', component: Register }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

5、创建登录和注册组件

<!-- src/components/Login.vue -->
<template>
  <el-form @submit.prevent="onLogin">
    <el-form-item label="用户名">
      <el-input v-model="username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="password" />
    </el-form-item>
    <el-button type="primary" @click="onLogin">登录</el-button>
  </el-form>
</template>

<script>
import { useUserStore } from '../store/user';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const userStore = useUserStore();
    const router = useRouter();
    const username = ref('');
    const password = ref('');

    const onLogin = () => {
      // 假设角色是基于用户名决定的
      const role = username.value === 'admin' ? 'admin' : 'user';
      userStore.login(username.value, role);
      if (role === 'admin') {
        router.push('/admin');
      } else {
        router.push('/user');
      }
    };

    return {
      username,
      password,
      onLogin
    };
  }
};
</script>

<!-- src/components/Register.vue -->
<template>
  <el-form @submit.prevent="onRegister">
    <el-form-item label="用户名">
      <el-input v-model="username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="password" />
    </el-form-item>
    <el-button type="primary" @click="onRegister">注册</el-button>
  </el-form>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const username = ref('');
    const password = ref('');

    const onRegister = () => {
      // 注册逻辑
      router.push('/login');
    };

    return {
      username,
      password,
      onRegister
    };
  }
};
</script>

6、创建不同角色的页面

<!-- src/views/Admin.vue -->
<template>
  <div>
    <h1>Admin Page</h1>
  </div>
</template>

<!-- src/views/User.vue -->
<template>
  <div>
    <h1>User Page</h1>
  </div>
</template>

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

7、配置主应用

// src/main.js
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');

<!-- src/App.vue -->
<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
};
</script>

<!-- src/App.vue -->
<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
};
</script>

```