vue3+elementPlus之后台管理系统（从0到1）(day1)

vue3官方文档：https://cn.vuejs.org/guide/introduction.html

1、项目创建

确保电脑已安装node

查看命令：

node -v

进入项目目录，创建项目

npm init vue@latest

Need to install the following packages:
  create-vue@3.13.0
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue3-admin
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ » 否

正在初始化项目 E:\daima\后台管理系统\vue3-admin\vue3-admin...

项目初始化完成，可执行以下命令：

  cd vue3-admin
  npm install
  npm run dev

npm notice
npm notice New major version of npm available! 9.5.1 -> 11.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0

安装依赖

npm install

启动项目

npm run dev

2、vue3项目文件介绍

node_modules：项目的依赖文件

public：项目的公共资源文件

src：放置组件和入口文件

      assets：项目的静态资源文件，存放图片或样式

      components：存放自己封装组件的文件夹

      router：项目路由文件夹

      views：页面文件夹

       App.vue：项目主文件，所有页面都是在App.vue下进行切换的，也可以理解为所有路由是App.vue的子组件

      main.js：项目的主入口文件，主要作用是初始化vue实例，并引入所需插件

.gitinore：git忽略文件，不上传提交的文件

（amd：异步加载，cmd：懒加载）

index.html：项目中唯一的html文件，项目的入口

package.json：项目的node配置文件，里面定义了项目的npm脚本，依赖包等信息

README.md：项目中的说明文件

vite.config.js：项目的配置文件

项目启动后调用顺序：index.html->main.js->App.vue->router/index.js->components

3、路由基础

官方教程：入门 | Vue Router

路由使用

1、导入vue-router

2、创建路由规则

3、创建路由实例

4、导出路由实例

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'/*** 1、导入路由 vue-router* 2、创建路由 createRouter   * createWebHistory 路由模式（History）/开头，一把是要后端配合使用，容易产生404页面* createWeHashbHistory  路由模式（Hasd）#开头，无需配合*///创建路由规则
const routes = [{//访问时路径path: '/',//命名路由，路由别名name: 'home',//当访问时需要展示的组件component: HomeView,},{path: '/about',name: 'about',//路由懒加载，对于一些不确定立即需要显示的页面可以使用懒加载component: () => import('../views/AboutView.vue'),},
]//创建router实例
const router = createRouter({//配置路由模式history: createWebHashHistory(import.meta.env.BASE_URL),//配置路由规则routes 
})//导出路由
export default router

5、在mian.js导入并挂载路由

<!--main.js-->
import './assets/main.css'
//解构出createApp
import { createApp } from 'vue'
//导入根组件
import App from './App.vue'
//导入路由配置
import router from './router'
//创建一个根app实例
const app = createApp(App)
//将路由挂载到app实例中
app.use(router)
//将app实例挂载到id为app的元素上
app.mount('#app')

两种路由模式

1. history 模式 (createWebHistory)

特点：

  • URL 形式：URL 看起来更加干净，没有 # 符号，例如 http://example.com/user/id。

  • 后端配合：由于这种模式使用的是浏览器的历史记录 API（History API），当用户直接访问一个深层链接（如 http://example.com/user/id）或通过刷新页面时，服务器需要能够返回相应的 index.html 文件，以便 Vue Router 接管路由。这意味着后端服务器需要配置以支持这种路由模式。

  • SEO 友好：相比 hash 模式，history 模式对搜索引擎更加友好，因为搜索引擎爬虫可以更容易地抓取和索引这些页面。

2. hash 模式 (createWebHashHistory)

特点：

  • URL 形式：URL 中包含一个 # 符号，例如 http://example.com/#/user/id。# 及其后面的部分被称为 hash 值。

  • 无需后端配合：由于 hash 值不会发送到服务器，所以这种模式不需要后端服务器进行任何特殊配置。所有路由处理都由前端 Vue Router 完成。

  • SEO 不友好：虽然搜索引擎可以抓取带有 hash 的 URL，但通常不会索引这些页面内容，因为它们被视为锚点而非独立页面。

4、页面UI组件

elementPlus官方文档：一个 Vue 3 UI 框架 | Element Plus

elementPlus使用

1、安装elementPlus

npm install element-plus --save

2、自动导入

导入方式3种：

1）全部导入：方便开发，不需要考虑用到什么组件导入什么组件，打包后项目体积会变大

2）按需导入：自动按需导入，不需要考虑导入什么组件，打包后项目体积不会特别大

3）手动导入：比较麻烦，用什么导入什么，体积小

npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

格式化样式导入

在开发项目阶段会使用各种标签，有些标签会带有一些自带的样式属性，可以通过格式化样式的方式将一些常见的不需要的样式去掉

1、安装

npm install --save normalize.css

2、在main.js中导入

//导入格式化样式文件
import 'normalize.css/normalize.css'

添加预编译 css

在开发中写css有些时候不够便利，所以在开发中可以用less或sass

安装

npm i sass

在写样式的时候不需要做其他多余的配置，只需要在style标签中添加lang="scss"

一、Less介绍

  1. 定义：Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。

  2. 语法：

    • 变量：使用“@”符号定义，例如@color: blue;。

    • 混合：通过“.mixin-name ()”的方式调用，混合可以包含属性集，在需要的地方进行混入。例如：.bordered(@width: 1px, @color: #000) { border: @width solid @color; } .element { .bordered(2px, red); }。

    • 嵌套规则：使用“{}”进行嵌套，减少重复代码。例如div{.son{属性:属性值;}}。

    • 运算：支持基本的数学运算，如加减乘除，可以直接在属性值中进行运算。例如width: @width + 10px;。

  3. 运行环境：Less可以运行在Node.js或浏览器端，需要引入less.js来处理Less代码输出Css到浏览器。

  4. 特点：

    • 清晰明了，安装便捷，易于上手。

    • 对编译环境要求比较宽松，适合小型项目。

    • 在兼容性方面表现较好，能够与大多数CSS语法兼容，并且可以在旧版本的浏览器中较好地运行。

二、Sass介绍

  1. 定义：Sass（Syntactically Awesome Stylesheets）是一种将脚本解析成CSS的脚本语言，即SassScript。它使用.scss或.sass文件扩展名来表示Sass源文件。

  2. 语法：

    • 变量：使用“”符号定义，例如‘color: blue;`。

    • 混合：使用“@include mixin-name”的方式调用，混合可以传递参数，并且可以包含选择器和属性集，更加灵活。例如：@mixin bordered($width: 1px, $color: #000) { border: $width solid $color; } .element { @include bordered(2px, red); }。

    • 嵌套规则：使用“{}”进行嵌套，减少重复代码。语法与Less相似。

    • 运算：支持丰富的运算操作，并且在运算的灵活性和复杂性方面可能更胜一筹。例如可以进行复杂的数学表达式计算和单位转换。

    • 控制指令：提供了更多的控制指令，如@if、@for、@each、@while等，可以实现更复杂的逻辑控制。

  3. 运行环境：Sass是在服务端处理的，其安装需要Ruby环境。

  4. 特点：

    • 功能强大，基本可以说是一种真正的编程语言。

    • 提供了更多的控制指令和内置函数库，可以进行颜色处理、字符串操作、数学计算等各种操作。

    • 可以输出多种格式的CSS，如紧凑格式、展开格式、压缩格式等，可以根据不同的需求进行选择。

    • 拥有庞大的生态系统和活跃的社区，有很多工具和插件可供选择，如Compass、Bourbon等，这些工具和插件可以进一步扩展Sass的功能，提高开发效率。

三、Less与Sass的区别

  1. 实现方式：Less是基于JavaScript的，在客户端处理；而Sass是基于Ruby的，在服务器端处理。

  2. 变量符号：Less使用“@”符号定义变量，而Sass使用“$”符号。

  3. 功能特性：Sass的功能比Less更强大，提供了更多的控制指令和内置函数库。

  4. 学习曲线：Less相对Sass更加清晰明了，易于上手，对编译环境要求比较宽松，适合小型项目；而Sass则更适用于复杂或大型项目，需要掌握更多的语法和功能。

  5. 生态系统：Sass拥有庞大的生态系统和活跃的社区，有更多的工具和插件可供选择；而Less虽然也有一些工具和插件，但数量相对较少。

icon组件安装

npm install @element-plus/icons-vue

在开发过程中如果想要使用icon

1、导入需要的icon

import { Fold, Expand } from "@element-plus/icons-vue";

2、注册该icon

components:{Fold,Expand}

3、使用icon

<el-icon size="30"><Fold /><Expand />
</el-icon>

界面主体搭建

主体界面-头部点击收起

<!--home.vue>
<template><div class="common-layout"><el-container><!-- 左侧侧边栏  头部点击收起侧边栏--><el-aside ><div class="logo-box"><el-image style="height: 35px;" :src="url"></el-image><h2 class="manage-title" v-show="!collapse">后台管理系统</h2></div><!--使用自定义组件 --><AsideCom /></el-aside><!-- 右侧内容 --><el-container><el-header><el-icon size="30" @click="collapse=!collapse"><component :is="headerLeft"></component></el-icon></el-header><el-main>Main</el-main></el-container></el-container></div>
</template><script>
// 万物皆模块
import logo from "../assets/logo.png";
import { Fold, Expand } from "@element-plus/icons-vue";
// @代表src路径
import AsideCom from "@/components/AsideCom.vue";export default{data(){return {url:logo,collapse: false}},computed:{headerLeft(){return this.collapse?'Expand':'Fold';},asideWide(){return this.collapse?'60px':'200px';}},components:{Fold,Expand}
}
</script><!-- lang="scss" 定义样式是使用scss写的 -->
<!-- scoped 表示样式只在当前页面有效 -->
<style lang="scss" scoped>.el-container{background-color: rgb(243, 251, 253);.el-aside{background-color: rgb(198, 221, 241);width: v-bind(asideWide);   //直接取计算属性的值transition: all 0.2s;.logo-box{height: 60px;display: flex;align-items: center;padding: 0 10px;box-sizing: border-box;.el-image{margin-right: 10px;}.manage-title{font-size: 18px;}}}
}.el-header{background-color: rgb(179, 205, 235);display: flex;justify-content: space-between;align-items: center;
}</style>

侧边栏布局AsideCom

<template><el-menu default-active="2" class="el-menu-vertical-demo"><el-menu-item>首页</el-menu-item><el-sub-menu index="1"><template #title><el-icon><Avatar /></el-icon><span>账号管理</span></template><el-menu-item>管理员列表</el-menu-item><el-menu-item>用户列表</el-menu-item></el-sub-menu>  </el-menu>
</template><script>
import { Avatar } from '@element-plus/icons-vue';
export default{data(){return{}},components:{Avatar,}}
</script>

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

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

相关文章

SparkSQL数据模型综合实践

SparkSQL数据模型综合实践

文章目录 1. 实战概述2. 实战步骤2.1 创建数据集2.2 创建数据模型对象2.2.1 创建常量2.2.2 创建加载数据方法2.2.3 创建过滤年龄方法2.2.4 创建平均薪水方法2.2.5 创建主方法2.2.6 查看完整代码 2.3 运行程序&#xff0c;查看结果 3. 实战小结 1. 实战概述 在本次实战中&#…
阅读更多...
软件设计大致步骤

软件设计大致步骤

由于近期在做软件架构设计&#xff0c;这里总结下大致的设计流程 软件设计流程 1 首先要先写系统架构图&#xff0c;将该功能在整个系统的位置以及和大致的内部模块划分 2 然后写内部的结构图&#xff0c;讲内部的各个子系统&#xff0c;模块&#xff0c;组件之间的关系和调用…
阅读更多...
读取长文本，使用读取底表

读取长文本，使用读取底表

文章目录 代码有原始数据内表作为主表连接STXL的示例获取物料分类获取物料分类的文本的宏读取分类 https://blog.csdn.net/DeveloperMrMeng/article/details/118354649 代码 "第三种&#xff1a;读取底表获取文本 DATA: LT_TLINE TYPE STANDARD TABLE OF TLINE. DATA: LS…
阅读更多...
阀井可燃气体监测仪，开启地下管网安全新篇章-旭华智能

阀井可燃气体监测仪，开启地下管网安全新篇章-旭华智能

在城市的脉络中&#xff0c;地下管网犹如隐秘的动脉&#xff0c;支撑着现代生活的运转。而在这庞大网络的关键节点上&#xff0c;阀井扮演着不可或缺的角色。然而&#xff0c;由于其密闭性和复杂性&#xff0c;阀井内部一旦发生可燃气体泄漏&#xff0c;将对公共安全构成严重威…
阅读更多...
Golang结合MySQL和DuckDB提高查询性能

Golang结合MySQL和DuckDB提高查询性能

要在Golang中组合MySQL和DuckDB以提高查询性能&#xff0c;请考虑使用混合查询执行方法。这种方法利用了MySQL强大的事务管理和DuckDB闪电般的分析处理能力。本文介绍如何充分利用两者的方法。 各取所长 用MySQL处理事务&#xff0c;用DuckDB处理分析 MySQL应该处理常规的INS…
阅读更多...
Docker PG流复制搭建实操

Docker PG流复制搭建实操

目录标题 制作镜像1. 删除旧的容器2. 创建并配置容器3. 初始化数据库并启动 主库配置参数4. 配置主库5. 修改 postgresql.conf 配置 备库配置参数6. 创建并配置备库容器7. 初始化备库 流复制8. 配置&检查主库复制状态9. 检查备库配置 优化建议问题1&#xff1a;FATAL: usin…
阅读更多...
增广卡尔曼滤波AKF的要点分析

增广卡尔曼滤波AKF的要点分析

增广卡尔曼滤波（Augmented Kalman Filter, AKF）是相对特定的卡尔曼滤波模型来说的，在状态量和/或观测量上进行增广，以满足特定的要求。 通常用于：专门用于处理具有状态噪声和观测噪声的不确定性，尤其是在需要同时估计系统状态和额外参数时。它通过将额外的参数或状态变量…
阅读更多...
三只松鼠携手爱零食，社区零售新高峰拔地而起

三只松鼠携手爱零食，社区零售新高峰拔地而起

合纵连横&#xff0c;这是当前零售行业发展的一个主旋律。从商超之王胖东来的全国调改&#xff0c;到社区零售正在进行的渠道变革&#xff0c;竞争的激烈和商业模式的升级令人目不暇接。 量贩零食赛道在过去一年就是如此&#xff0c;有杀伐&#xff0c;有并购&#xff0c;刀光…
阅读更多...
Java并发编程——线程池(基础，使用，拒绝策略，命名，提交方式，状态)

Java并发编程——线程池(基础，使用，拒绝策略，命名，提交方式，状态)

我是一个计算机专业研0的学生卡蒙Camel&#x1f42b;&#x1f42b;&#x1f42b;&#xff08;刚保研&#xff09; 记录每天学习过程&#xff08;主要学习Java、python、人工智能&#xff09;&#xff0c;总结知识点&#xff08;内容来自&#xff1a;自我总结网上借鉴&#xff0…
阅读更多...
Linux第二课：LinuxC高级 学习记录day04

Linux第二课：LinuxC高级 学习记录day04

6、shell中的语句 6.3、结构性语句 6.3.1、if if…then…fi 1、结构 1&#xff09;基本结构 if 表达式 then 命令表 fi if [ 表达式 ] // 【】两侧有空格 then 命令表 fi 2&#xff09;分层结构 if 表达式 then 命令表1 else 命令表2 fi 3&#xff09;嵌套结构 if …
阅读更多...
tomcat文件目录讲解

tomcat文件目录讲解

目录的用处 bin&#xff1a;tomcat的可执行命令&#xff0c;比如&#xff1a;tomcat的启动停止命令&#xff0c;也包含其他命令以及.bat&#xff08;Windows执行的命令&#xff09;和.sh&#xff08;Linux操作系统执行的命令&#xff09;文件config:关于tomcat的配置&#xff0…
阅读更多...
【Rust自学】12.4. 重构 Pt.2：错误处理

【Rust自学】12.4. 重构 Pt.2：错误处理

12.4.0. 写在正文之前 第12章要做一个实例的项目——一个命令行程序。这个程序是一个grep(Global Regular Expression Print)&#xff0c;是一个全局正则搜索和输出的工具。它的功能是在指定的文件中搜索出指定的文字。 这个项目分为这么几步&#xff1a; 接收命令行参数读取…
阅读更多...
梁山派入门指南4——定时器使用详解，包括定时器中断、PWM产生、输入捕获测量频率

梁山派入门指南4——定时器使用详解，包括定时器中断、PWM产生、输入捕获测量频率

梁山派入门指南4——定时器使用详解&#xff0c;包括定时器中断、PWM产生、输入捕获测量频率 1. 定时器概览2.基本定时器2.1 基本定时器介绍2.2 梁山派上的基本定时器开发2.2.1. 了解梁山派上的基本定时器资源&#xff08;实际上我们以及在上面了解过了&#xff09;2.2.2. 配置…
阅读更多...
excel仅复制可见单元格，仅复制筛选后内容

excel仅复制可见单元格，仅复制筛选后内容

背景 我们经常需要将内容分给不同的人&#xff0c;做完后需要合并 遇到情况如下 那是因为直接选择了整列&#xff0c;当然不可以了。 下面提供几种方法&#xff0c;应该都可以 直接选中要复制区域然后复制&#xff0c;不要选中最上面的列alt;选中可见单元格正常复制&#xff…
阅读更多...
JVM类加载器(附面试题)

JVM类加载器(附面试题)

什么是类加载器 类加载器&#xff08;ClassLoader&#xff09; 是 Java 虚拟机&#xff08;JVM&#xff09;中的一个组件&#xff0c;用于在运行时将字节码文件加载到内存中&#xff0c;并将其转换为 JVM 可以执行的二进制数据结构。 字节码文件通常是以.class为扩展名的文件…
阅读更多...
FFmpeg硬件解码

FFmpeg硬件解码

使用FFmpeg进行硬件解码时&#xff0c;通常需要结合FFmpeg的API和硬件加速API&#xff08;如CUDA、VAAPI、DXVA2等&#xff09;。以下是一个简单的C代码示例&#xff0c;展示如何使用FFmpeg进行硬件解码。这个示例使用了CUDA作为硬件加速的后端。 1. 安装FFmpeg和CUDA 确保你…
阅读更多...
Linux 进程前篇(冯诺依曼体系结构和操作系统)

Linux 进程前篇(冯诺依曼体系结构和操作系统)

目录 一.冯诺依曼体系结构 1.概念 2.硬件层面的数据流 3.总结加补充 二.操作系统 (Operating System) 1.概念 2.设计OS的目的 3.定位 4.操作系统的管理 5.计算机体系的层状结构 在我们认识进程之前&#xff0c;我们先了解什么是冯诺依曼体系结构 一.冯诺依曼体系结构…
阅读更多...
Redis 3.2.1在Win10系统上的安装教程

Redis 3.2.1在Win10系统上的安装教程

诸神缄默不语-个人CSDN博文目录 这个文件可以跟我要&#xff0c;也可以从官网下载&#xff1a;https://github.com/MicrosoftArchive/redis/releases 这个是微软以前维护的Windows版Redis安装包&#xff0c;如果想要比较新的版本可以从别人维护的项目里下&#xff08;https://…
阅读更多...
Unity-Mirror网络框架-从入门到精通之RigidbodyPhysics示例

Unity-Mirror网络框架-从入门到精通之RigidbodyPhysics示例

文章目录 前言示例一、球体的基础配置二、三个球体的设置差异三、示例意图LatencySimulation前言 在现代游戏开发中，网络功能日益成为提升游戏体验的关键组成部分。本系列文章将为读者提供对Mirror网络框架的深入了解，涵盖从基础到高级的多个主题。Mirror是一个用于Unity的开…
阅读更多...
JAVA实现五子棋小游戏(附源码)

JAVA实现五子棋小游戏(附源码)

文章目录 一、设计来源捡金币闯关小游戏讲解1.1 主界面1.2 黑棋胜利界面1.3 白棋胜利界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载更多优质源码分享 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/145161039 JA…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023