从0到1实现vue3+vite++elementuiPlus+ts的后台管理系统(一)

前言:从这篇文章开始实现vue3+vite的后台管理系统,记录下自己搭建后台系统图的过程。 这篇文章完成项目的初始化和基本配置,这一步可以直接跟着vue3官网进行。整个系列只有前端部分,不涉及后端。

vue3官网:https://cn.vuejs.org/guide/quick-start.html

这是项目的nodenpm版本:

1.项目初始化

npm create vue@latest 
cd vite-ts-vueadmin 
npm install 
npm run dev

项目运行成功截图:

2.安装系统所需依赖

这个项目是用ts写的,先安装下支持typescriptnode.js支持类型文件。

npm install @types/node --save-dev

安装后,在项目根目录下建types文件夹,types/user.d.ts 创建ts的变量声明类型

interface User {token: string;avatar: string; // 头像mobile:string; //   手机号account:string; // 用户名id:number; // 用户id
}

3.然后在 vue.config.js 文件下配置

interface User {token: string;avatar: string; // 头像mobile:string; //   手机号account:string; // 用户名id:number; // 用户id
}

安装piniapiniavue2中的vuex, 安装好pinia后,在安装插件pinia-plugin-persistedstate

npm install pinia 
npm install pinia-plugin-persistedstate

使用:在store/index.ts

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate';const pinia = createPinia();
pinia.use(persist);export default pinia

pinia-plugin-persistedstate 插件可以将pinia数据自动保存到浏览器本地存储

下面的例子帮助大家理解,在页面新增登录、退出按钮,登录时将数据存到pinia,使用这个插件后发现,浏览器会同时存储这些数据。

HelloWorld.vue文件的代码如下:

<el-button type="primary" @click="login">登录</el-button>
<el-button type="primary" @click="unlogin">退出</el-button><h1>{{ msg }}</h1>import { storeToRefs } from 'pinia'
import { toRefs } from 'vue'
import { usersStore } from '@/store/user'
const store = usersStore()// storeToRefs(store) 将store中的属性解构出来,具有响应式,storeToRefs(store.userinfo) 是错误的,storeToRefs只能解构store对象为响应式对象
// 解构store中的属性 ,不使用storeToRefs
const { name,mobile } = toRefs(store.userInfo)
console.log(name.value,mobile)
const count = ref<Number>(0)
const login = ()=>{store.setUserInfo({name:'张三',mobile:13221081920,})
}
const unlogin = ()=>{store.clearUserInfo()
}

新建store/user.ts文件,定义一些登录后的信息,

import { defineStore } from 'pinia';
import { ref } from 'vue';
import type { User } from '@/types/user'; export const usersStore = defineStore('users', () => {const userInfo = ref<User>({name:'abc',avatar: '123', // 头像mobile: '13221091091', //   手机号account: 'lita', // 用户名id: 1});const setUserInfo = (u:User) =>{userInfo.value = u;}const clearUserInfo = () =>{// void 是用来创建 undefined,不管它后面跟个啥,得到的都是 undefined;userInfo.value = void 0;// 上面的代码代表 userinfo.value = undefined;}return { userInfo ,setUserInfo, clearUserInfo }
},{persist: true})

点击登录,数据会被存储到localStorage,点击退出localstorage里面的数据会清空

4.继续安装插件和组件

npm i elementui-plus
npm i unplugin-auto-import/vite
npm i unplugin-vue-components/vite

unplugin-auto-import/vite在组件内部自动import

unplugin-vue-components/vite在组件内部引入其他组件时可以省略import

ElementPlusResolver在使用elemtuiPlus组件时,无需引入,直接使用即可。

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

vue.config.js文件中加入下面的代码:

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vite.dev/config/
export default defineConfig({plugins: [AutoImport ({imports: ['vue','vue-router'], // 自动导入vue和vue-router相关函数resolvers: [ElementPlusResolver()],//这样就不用在main.js中使用import来导入element-plus了}),Components({resolvers: [ElementPlusResolver()] // 这样我们就可以在组件中不需要引入就可以使用elementui-plus中的组件了}),vue()],
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/64287.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaEE初阶——多线程(线程安全-锁)

复习上节内容&#xff08;部分-掌握程度不够的&#xff09; 加锁&#xff0c;解决线程安全问题。 synchronized关键字&#xff0c;对锁对象进行加锁。 锁对象&#xff0c;可以是随便一个Object对象&#xff08;或者其子类的对象&#xff09;&#xff0c;需要关注的是&#xff…

如何在NGINX中实现基于IP的访问控制(IP黑白名单)?

大家好&#xff0c;我是锋哥。今天分享关于【如何在NGINX中实现基于IP的访问控制&#xff08;IP黑白名单&#xff09;&#xff1f;】面试题。希望对大家有帮助&#xff1b; 如何在NGINX中实现基于IP的访问控制&#xff08;IP黑白名单&#xff09;&#xff1f; 1000道 互联网大…

Docker--Docker Registry(镜像仓库)

什么是Docker Registry&#xff1f; 镜像仓库&#xff08;Docker Registry&#xff09;是Docker生态系统中用于存储、管理和分发Docker镜像的关键组件。 镜像仓库主要负责存储Docker镜像&#xff0c;这些镜像包含了应用程序及其相关的依赖项和配置&#xff0c;是构建和运行Doc…

微信小程序:实现节点进度条的效果;正在完成的节点有动态循环效果;横向,纵向排列

参考说明 微信小程序实现流程进度功能 - 知乎 上面的为一个节点进度条的例子&#xff0c;但并不完整&#xff0c;根据上述代码&#xff0c;进行修改完善&#xff0c;实现其效果 横向效果 代码 wxml <view classorder_process><view classprocess_wrap wx:for&quo…

window下的qt5.14.2配置vs2022

这里做一个笔记&#xff0c;已知qt5.14.2和vs2022不兼容&#xff0c;无法自动扫描到vs的编译器。但由于团队协作原因&#xff0c;必须使用qt5.14.2&#xff0c;并且第三方库又依赖vs2022。其实qt5.15.2是支持vs2022的&#xff0c;如果能够用qt5.15.2&#xff0c;还是建议使用qt…

Java-27 深入浅出 Spring - 实现简易Ioc-03 在上节的业务下手动实现IoC

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 大数据篇正在更新&#xff01;https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了&#xff1a; MyBatis&#xff…

梳理你的思路(从OOP到架构设计)_UML应用:业务内涵的分析抽象表达01

目录 1、 系统分析(System Analysis) 系統分析的涵意 业务(领域)知识 业务内涵 业务(领域)概念 2、举例(一) &#xff1a;东方传说 UML与建模工具 1、 系统分析(System Analysis) 系統分析的涵意 许多人在学习系统分析(System Analysis)时&#xff0c;常迷失于其字面上…

Web 安全 跨站 跨域 XSS CSRF

跨站 跨站即 cross-site&#xff0c;它和同站&#xff08;same-site&#xff09;相对&#xff0c;对协议和端口号无要求&#xff0c;只要两个 URL 的 eTLD 1 一致&#xff0c;就能称为同站。那么什么是 eTLD 呢&#xff1f; eTLD 即 effective top level domain&#xff0c;…

k8s服务搭建与实战案例

Kubernetes&#xff08;K8s&#xff09;作为一个开源的容器编排平台&#xff0c;广泛应用于现代的云原生应用架构中。以下是一些常见的 **Kubernetes 实战案例**&#xff0c;包括从基础部署到高级应用场景的使用。通过这些案例&#xff0c;可以更好地理解 K8s 的运作原理和最佳…

PYQT5程序框架

pyqt5程序框架_哔哩哔哩_bilibili 1.UI代码 Qhkuja.py # -*- coding: utf-8 -*-# Form implementation generated from reading ui file Qhkuja.ui # # Created by: PyQt5 UI code generator 5.15.7 # # WARNING: Any manual changes made to this file will be lost when py…

基于MobileNet v2模型的口罩实时检测系统实现

基于kaggle数据集训练的模型其实现结果如下&#xff1a; 代码结构如下&#xff1a; 实时口罩检测器&#xff1a; 从导航栏中的链接“实时的口罩检测器”功能&#xff0c;该系统包含一个实时检测用户是否佩戴口罩的功能。基于图片的口罩检测器&#xff1a; 从另一个导航链接“基…

高效项目托管指南:从本地到 GitHub 的完整流程

在现代软件开发中&#xff0c;将项目托管在 GitHub 上是一个常见且高效的方式。GitHub 不仅可以用作版本控制工具&#xff0c;还能帮助你与团队协作或展示自己的项目。本文将带你一步步完成项目的打包和上传。 高效项目托管指南&#xff1a;从本地到 GitHub 的完整流程 1. 准备…

用TPS54531绘制BUCK电路板

首先&#xff0c;这TPS54531 是一款非同步降压转换器芯片&#xff08;异步&#xff09;。 这是BUCK的基本原理图&#xff0c;它是异步的。 我们用这款芯片来控制MOS管的高频开关&#xff0c;以此实现降压。 这里使用的应该是CCM模式。 这里&#xff1a; Vi为24V&#xff0c;…

【新人系列】Python 入门(十六):正则表达式

✍ 个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12801353.html &#x1f4e3; 专栏定位&#xff1a;为 0 基础刚入门 Python 的小伙伴提供详细的讲解&#xff0c;也欢迎大佬们…

人工智能增强的音频和聊天协作服务

论文标题&#xff1a;AI-enabled Audio and Chat Collaboration Services 中文标题&#xff1a;人工智能增强的音频和聊天协作服务 作者信息&#xff1a; Emil P. Andersen, Norwegian Defence Research Establishment (FFI), Kjeller, NorwayJesper R. Goksr, Sindre E. Ha…

【原创】- 澳门预约医疗系统 - 一个基于Vue3编写的程序

在空余时间写了一个前端预约医疗系统&#xff0c;用Vue3写的一套前端模块&#xff0c;里面数据都是本地模拟&#xff0c;一个练手的简单项目。 此项目主要功能有&#xff1a; 1.预约挂号、挂号记录 2.疫苗接种 3.就医记录 4.科室导航 5.AI问诊 6.个人病例 7.支付可配置化 8.健康…

Cadence学习笔记 3 MCU主控原理图绘制

基于Cadence 17.4&#xff0c;四层板4路HDMI电路 更多Cadence学习笔记&#xff1a;Cadence学习笔记 1 原理图库绘制Cadence学习笔记 2 PCB封装绘制 目录 3、MCU主控原理图绘制 快捷键总结&#xff1a; 3、MCU主控原理图绘制 新建原理图Design&#xff0c;选择好SCH文件夹&…

vue2实现答题组件

需求 实现一个答题组件&#xff0c;点击正确的选项&#xff0c;该选项背景变绿色&#xff1b;点击错误的选项&#xff0c;该选项背景变红色。不管点击了什么选项&#xff0c;延迟一秒后切换下一题。 每次出题&#xff0c;从题库中选随机选择一道用户此次进入这个页面后还没有…

3D相框案例讲解(详细)

前言 通过现阶段的学习&#xff0c;我们已经掌握了HTML&#xff0c;CSS和JS部分的相关知识点&#xff0c;现在让我们通过一篇案例&#xff0c;来巩固我们近期所学的知识点。 详细视频讲解戳这里 任务一 了解目标案例样式 1.1了解案例 3D相框 1.2 分析案例 首先我们看到一个…

SuperMap GIS基础产品FAQ集锦(20241216)

一、SuperMap iDesktopX 问题1&#xff1a;想问一下 SuperMap iDesktopX可以修改倾斜入库后数据的位置吗 11.2.1 【解决办法】在配置文件&#xff08;*.scp&#xff09;中找打position属性&#xff0c;修改其中的xyz值&#xff0c;用于改变位置&#xff1b;修改后如果想要相机…