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

news2025/1/13 8:52:05

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.coloradmin.cn/o/2275895.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

汉图科技XP356DNL高速激光打印一体机综合性能测评

汉图科技XP356DNL高速激光打印一体机综合性能测评

汉图科技XP356DNL高速激光打印一体机效率方面表现出色&#xff0c;支持A4纸型的高速打印&#xff0c;单面打印速度高达35页/分钟&#xff0c;自动双面打印速度可达32面/分钟&#xff0c;这样的速度在日常办公中能够极大地提高打印效率&#xff0c;减少等待时间&#xff0c;满足…
阅读更多...
【芯片封测学习专栏 -- 什么是 Chiplet 技术】

【芯片封测学习专栏 -- 什么是 Chiplet 技术】

请阅读【嵌入式开发学习必备专栏 Cache | MMU | AMBA BUS | CoreSight | Trace32 | CoreLink | ARM GCC | CSH】 文章目录 OverviewChiplet 背景UCIeChiplet 的挑战 Overview Chiplet 又称为小芯片。该技术通过将大型SoC划分为更小的芯片&#xff0c;使得每个部分都能采用不同…
阅读更多...
1.CSS的复合选择器

1.CSS的复合选择器

1.1 什么是复合选择器 在CSS中&#xff0c;可以根据选择器的类型把选择器分为基础选择器和复合选择器&#xff0c;复合选择器是建立在基础选择器之上&#xff0c;对基础选择器进行组合形成的。 复合选择器可以更精准、更高效的选择目标元素&#xff08;标签&#xff09; 复…
阅读更多...
【MySQL】SQL菜鸟教程（一）

【MySQL】SQL菜鸟教程（一）

1.常见命令 1.1 总览 命令作用SELECT从数据库中提取数据UPDATE更新数据库中的数据DELETE从数据库中删除数据INSERT INTO向数据库中插入新数据CREATE DATABASE创建新数据库ALTER DATABASE修改数据库CREATE TABLE创建新表ALTER TABLE变更数据表DROP TABLE删除表CREATE INDEX创建…
阅读更多...
docker 自建rustdesk服务器测试

docker 自建rustdesk服务器测试

参考https://blog.csdn.net/tootsy_you/article/details/130010564 注意&#xff1a; docker-compose.yml version: 3networks:rustdesk-net:external: falseservices:hbbs:container_name: hbbsports:- 21115:21115- 21116:21116- 21116:21116/udp- 21118:21118image: rust…
阅读更多...
检验统计量与p值笔记

检验统计量与p值笔记

一、背景 以雨量数据为例&#xff0c;当获得一个站点一年的日雨量数据后&#xff0c;我们需要估计该站点的雨量的概率分布情况&#xff0c;因此我们利用有参估计的方式如极大似然法估计得到了假定该随机变量服从某一分布的参数&#xff0c;从而得到该站点的概率密度函数&#x…
阅读更多...
每日十题八股-2025年1月12日

每日十题八股-2025年1月12日

1.为什么四次挥手之后要等2MSL? 2.服务端出现大量的timewait有哪些原因? 3.TCP和UDP区别是什么&#xff1f; 4.TCP为什么可靠传输 5.怎么用udp实现http&#xff1f; 6.tcp粘包怎么解决&#xff1f; 7.TCP的拥塞控制介绍一下&#xff1f; 8.描述一下打开百度首页后发生的网络过…
阅读更多...
制造企业“数字化转型”典型场景参考

制造企业“数字化转型”典型场景参考

聚焦产业链上下游企业研发设计、生产制造、运维服务、经营管理、供应链管理等场景&#xff0c;以场景为切入点梳理数字化转型痛点需求&#xff0c;绘制重点行业、重点产业链数字化转型场景图谱&#xff08;简称“一图谱”&#xff09;&#xff0c;明确企业数字化转型路径&#…
阅读更多...
Web渗透测试之XSS跨站脚本 防御[WAF]绕过手法

Web渗透测试之XSS跨站脚本 防御[WAF]绕过手法

目录 XSS防御绕过汇总 参考这篇文章绕过 XSS payload XSS防御绕过汇总 服务端知道有网络攻击或者xss攻 Html
阅读更多...
《机器学习》——sklearn库中CountVectorizer方法（词频矩阵）

《机器学习》——sklearn库中CountVectorizer方法（词频矩阵）

CountVectorizer方法介绍 CountVectorizer 是 scikit-learn 库中的一个工具&#xff0c;它主要用于将文本数据转换为词频矩阵&#xff0c;而不是传统意义上的词向量转换&#xff0c;但可以作为词向量转换的一种基础形式。用于将文本数据转换为词频矩阵&#xff0c;它是文本特征…
阅读更多...
session-manager-plugin: command not found 解决方案

session-manager-plugin: command not found 解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
Linux之读者写者模型与特殊锁的学习

Linux之读者写者模型与特殊锁的学习

目录 读者写者模型 特殊锁 悲观锁 自旋锁 在前几期&#xff0c;我们学习了多线程的生产者和消费者模型&#xff0c;生产者和消费者模型中&#xff0c;有三种关系&#xff0c;两个角色&#xff0c;一个场所&#xff0c;那么读者写者模型和生产者消费者模型有什么关联吗&…
阅读更多...
期刊（中英），期刊分区，期刊所在数据库（中英），出版商区别和联系

期刊（中英），期刊分区，期刊所在数据库（中英），出版商区别和联系

目录 对期刊、分区、数据库、出版商整体了解期刊&#xff08;中英&#xff09;期刊分区期刊所在数据库总结 出版商 对期刊、分区、数据库、出版商整体了解 下图是我对这四部分的一个理解&#xff0c;其中期刊根据论文使用语言分为中英两种&#xff0c;期刊分区是用来评判论文质…
阅读更多...
数学函数的参数和返回值探秘

数学函数的参数和返回值探秘

数学函数的参数和返回值探秘 一、数学函数的参数1.1 隐式类型转换1.2 隐式类型转换的秘密 二、数学函数的返回值 本文所说的数学函数单指<math.h>中的系统函数&#xff0c;这些函数对参数和返回值的要求与其他类函数是有一点不同的。尤其是参数部分&#xff0c;是有值得深…
阅读更多...
炸砖块游戏的最终图案

炸砖块游戏的最终图案

描述 小红正在玩一个“炸砖块”游戏，游戏的规则如下：初始有一个 n * m 的砖块矩阵。小红会炸 k 次，每次会向一个位置投炸弹，如果这个位置有一个砖块，则砖块消失，上方的砖块向下落。小红希望你画出最终砖块的图案。 输入描述 第一行输入三个正整数 n, m, k，代表矩阵的行…
阅读更多...
代码随想录算法训练营第 4 天（链表 2）| 24. 两两交换链表中的节点19.删除链表的倒数第N个节点 -

代码随想录算法训练营第 4 天（链表 2）| 24. 两两交换链表中的节点19.删除链表的倒数第N个节点 -

一、24. 两两交换链表中的节点 题目&#xff1a;24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 视频&#xff1a;帮你把链表细节学清楚&#xff01; | LeetCode&#xff1a;24. 两两交换链表中的节点_哔哩哔哩_bilibili 讲解&#xff1a;代码随想录 dummy-…
阅读更多...
【微服务】面试题 5、分布式系统理论：CAP 与 BASE 详解

【微服务】面试题 5、分布式系统理论：CAP 与 BASE 详解

分布式系统理论&#xff1a;CAP 与 BASE 详解 一、CAP 定理 背景与定义&#xff1a;1998 年由加州大学科学家埃里克布鲁尔提出&#xff0c;分布式系统存在一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容错性&#xff08;Part…
阅读更多...
【网络】：网络编程套接字

【网络】：网络编程套接字

目录 源IP地址和目的IP地址 源MAC地址和目的MAC地址 源端口号和目的端口号 端口号 VS 进程ID TCP协议和UDP协议 网络字节序 字符串IP和整数IP相互转换 查看当前网络的状态 socket编程接口 socket常见API 创建套接字 绑定端口号 发送数据 接收数据 sockaddr结构…
阅读更多...
UnityDemo-TheBrave-制作笔记

UnityDemo-TheBrave-制作笔记

这是我跟着b站up主MStudio的视频学习制作的&#xff0c;大体上没有去做一些更新的东西&#xff0c;这里只是一个总的总结。在文章的最后&#xff0c;我会放上可以游玩该游戏的链接和exe可执行文件&#xff0c;不过没有对游戏内容进行什么加工&#xff0c;只有基本的功能实现罢了…
阅读更多...
力扣经典二分题：4. 寻找两个正序数组的中位数

力扣经典二分题：4. 寻找两个正序数组的中位数

题目链接&#xff1a;4. 寻找两个正序数组的中位数 - 力扣&#xff08;LeetCode&#xff09; 一、题目分析 这道题目是让我们在 两个正序的数组中寻找中位数已知两个数组的大小分别是&#xff1a;int m nums1.size(),n nums2.size();中位数性质1&#xff1a;中位数左侧元素 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023