后端业务开发Element不够加上Plus 和Pinia数据管理ElementPlus 介绍: ElementPlus

ElementPlus

介绍:

ElementPlus 是一个为 Vue 3 设计的基于组件库的 UI 框架。它提供了一套完整的基于 Vue 3 构建的 UI 组件，帮助开发者快速构建美观和响应式的 web 应用。ElementPlus 是 Element UI 的升级版本，适配了 Vue 3，并且增加了一些新的功能和优化。

vue 组件库 ElementPlus

npm i element-plus

下载好后，你就能在包中找到element-plus

因为组件为全局组件，我们不太能全部导入进来，会让我们项目体量更大，加载更慢，所以我们按需加载，在我们需要用上这个组件时，再将这个组件引入进来去应用

在main.js中 .use使用全局组件

import { createApp } from 'vue'
import { createPinia} from 'pinia'
import * as ElmentPlusIconsVue from '@element-plus/icons-vue'
console.log(ElmentPlusIconsVue);
// * as 引入全部组件库
//vue 组件库
import {ElButton,ElForm,ElFormItem,ElInput,ElCheckbox,ElLink,ElIcon} from 'element-plus';
import router from './router';
// import elementplus from 'element-plus'
//按需加载
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App)
for( const [key,component] of Object.entries(ElmentPlusIconsVue)){
    app.component(key,component)
}
// Object.entries能拿到键值对的

app.use(createPinia())
    .use(ElIcon)
    .use(ElButton)
    .use(ElForm)
    .use(ElFormItem)
    .use(ElInput)
    .use(ElCheckbox)
    .use(ElLink)
    .use(router)
    .mount('#app')

ElementPlus 加载CSS

NProgress 进度条确保良好的用户体验

NProgress 是一个轻量级的进度条库，常用于在网页加载时显示进度条。它可以与各种 JavaScript 框架和库集成，例如 React、Vue.js、Angular 等。

NProgress 的基本用法

安装 NProgress

可以使用 npm 或 yarn 安装 NProgress：
```
npm install nprogress
```
或者
```
yarn add nprogress
```

引入 NProgress

在你的 JavaScript 文件中引入 NProgress：


import NProgress from 'nprogress';
import 'nprogress/nprogress.css';  // 引入样式文件

使用 NProgress

开始进度条：
```
NProgress.start();
```
结束进度条：
```
NProgress.done();
```

设置进度：

NProgress.set(0.4);  // 设置进度条到40%

增加进度：
```
NProgress.inc();  // 递增进度
```

自定义 NProgress

可以通过修改 CSS 文件来自定义进度条的样式。例如：

/* nprogress.css */
#nprogress .bar {
  background: red;  /* 修改进度条颜色 */
}

#nprogress .spinner-icon {
  border-top-color: red;
  border-left-color: red;
}

在我自己的项目中是把NProgress放到了路由守卫中，当路由发生了跳转前进度条开始，跳转后进度条结束

router.beforeEach((to,from,next) =>{
    NProgress.start();
    document.title = to.meta.title
    
})
router.afterEach(() =>{
    NProgress.done()
})

pania

Pinia 是一个用于 Vue.js 应用的状态管理库，是 Vuex 的现代替代品。它更加轻量、模块化和易于使用。下面是如何在 Vue.js 项目中使用 Pinia 的详细指南。

安装 Pinia

首先，安装 Pinia：

npm install pinia

在 Vue 项目中使用 Pinia

配置 Pinia

在你的 main.js 文件中配置 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');

创建一个 Pinia Store

创建一个新的文件，例如 stores/counter.js，并定义一个 Store：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

在组件中使用 Store

在你的 Vue 组件中使用这个 Store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.$state.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement,
    };
  },
};
</script>

完整示例

以下是一个完整的示例，包括项目结构和必要的代码：

项目结构：

src/
|-- stores/
|   |-- counter.js
|-- App.vue
|-- main.js

main.js:

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');

stores/counter.js:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

App.vue:

<template>
  <div id="app">
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './stores/counter';
import { computed } from 'vue';

export default {
  setup() {
    const counterStore = useCounterStore();
    const count = computed(() => counterStore.count);
    const increment = () => counterStore.increment();
    const decrement = () => counterStore.decrement();

    return {
      count,
      increment,
      decrement,
    };
  },
};
</script>

通过以上步骤，你就成功地在 Vue 项目中使用 Pinia 进行状态管理了。Pinia 提供了简单而强大的 API，使得状态管理更加直观和高效。

有这些工具，我们就能很快搭建出一个自己的后台管理系统

使用了 el-form 组件来构建表单，包含用户名和密码输入框，复选框和按钮。
使用了 el-input 组件来创建输入框，并使用 v-model 绑定到 param 对象的 username 和 password 属性，实现双向数据绑定。
使用了 el-checkbox 组件来创建记住密码复选框。
使用了 el-button 组件来创建登录按钮，并在点击时调用 submitForm 方法。
使用 usePermissStore 获取 Pinia 的权限存储。
定义表单验证规则 rules。
使用 reactive 创建响应式的 param 对象，存储用户名和密码。

通过这些练手，更加熟悉如何在 Vue 3 项目中使用 Composition API、Element Plus、Pinia 和 Vue Router 构建一个功能齐全的登录界面，并通过简单的 CSS 实现美观的样式。

后端业务开发Element不够加上Plus 和Pinia数据管理