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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

添加计算机到AD域中

添加计算机到AD域中

添加计算机到AD域中 一、确定计算机的DNS指向域中的DNS二、打开系统设置三、加域成功后 一、确定计算机的DNS指向域中的DNS 二、打开系统设置 输入域管理员的账密 三、加域成功后 这里有显示&#xff0c;就成功了。
阅读更多...
hot100_240. 搜索二维矩阵 II

hot100_240. 搜索二维矩阵 II

hot100_240. 搜索二维矩阵 II 直接遍历列减行增 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,1…
阅读更多...
vim使用指南

vim使用指南

&#x1f3dd;️专栏&#xff1a;计算机操作系统 &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” 目录 一、Vim 的基本概念 1.Vim 的主要模式&#xff1a; 1.1普通模式 (Normal Mode) 1.2插入…
阅读更多...
Web开发（一）HTML5

Web开发（一）HTML5

Web开发&#xff08;一&#xff09;HTML5 写在前面 参考黑马程序员前端Web教程做的笔记&#xff0c;主要是想后面自己搭建网页玩。 这部分是前端HTML5CSS3移动web视频教程的HTML5部分。主要涉及到HTML的基础语法。 HTML基础 标签定义 HTML定义 HTML(HyperText Markup Lan…
阅读更多...
软件设计大致步骤

软件设计大致步骤

由于近期在做软件架构设计&#xff0c;这里总结下大致的设计流程 软件设计流程 1 首先要先写系统架构图&#xff0c;将该功能在整个系统的位置以及和大致的内部模块划分 2 然后写内部的结构图&#xff0c;讲内部的各个子系统&#xff0c;模块&#xff0c;组件之间的关系和调用…
阅读更多...
Hadoop3.x 万字解析，从入门到剖析源码

Hadoop3.x 万字解析，从入门到剖析源码

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…
阅读更多...
UML系列之Rational Rose笔记九：组件图

UML系列之Rational Rose笔记九：组件图

一、新建组件图 二、组件图成品展示 三、工作台介绍 最主要的还是这个component组件&#xff1b; 然后还有这几个&#xff0c;正常是用不到的&#xff1b;基本的使用第四部分介绍一下&#xff1a; 四、基本使用示例 这些&#xff0c;主要是运用package还有package specifica…
阅读更多...
RabbitMQ 高可用方案：原理、构建与运维全解析

RabbitMQ 高可用方案：原理、构建与运维全解析

文章目录 前言&#xff1a;1 集群方案的原理2 RabbitMQ高可用集群相关概念2.1 设计集群的目的2.2 集群配置方式2.3 节点类型 3 集群架构3.1 为什么使用集群3.2 集群的特点3.3 集群异常处理3.4 普通集群模式3.5 镜像集群模式 前言&#xff1a; 在实际生产中&#xff0c;RabbitM…
阅读更多...
React Fiber框架中的Render渲染阶段——workLoop（performUnitOfWork【beginWork与completeWork】）

React Fiber框架中的Render渲染阶段——workLoop（performUnitOfWork【beginWork与completeWork】）

触发渲染过程——renderRoot renderRoot 是一个函数&#xff0c;用于触发渲染工作。它通常会调用并递归地执行一系列的渲染任务&#xff0c;直到完成整个更新过程。这个过程包括执行 Fiber 树中的 beginWork 和 completeWork&#xff0c;以及渲染新状态或 DOM。 function ren…
阅读更多...
一体机cell服务器更换内存步骤

一体机cell服务器更换内存步骤

一体机cell服务器更换内存步骤&#xff1a; #1、确认grdidisk状态 cellcli -e list griddisk attribute name,asmmodestatus,asmdeactivationoutcome #2、offline griddisk cellcli -e alter griddisk all inactive #3、确认全部offline后进行关机操作 shutdown -h now #4、开…
阅读更多...
uni-app编写微信小程序使用uni-popup搭配uni-popup-dialog组件在ios自动弹出键盘。

uni-app编写微信小程序使用uni-popup搭配uni-popup-dialog组件在ios自动弹出键盘。

uni-popup-dialog 对话框 将 uni-popup 的type属性改为 dialog&#xff0c;并引入对应组件即可使用对话框 &#xff0c;该组件不支持单独使用 示例 <button click"open">打开弹窗</button> <uni-popup ref"popup" type"dialog"…
阅读更多...
SYS_OP_MAP_NONNULL NULL的等值比较

SYS_OP_MAP_NONNULL NULL的等值比较

无意在数据库中发现了这个操作SYS_OP_MAP_NONNULL。 SYS_OP_MAP_NONNULL应该不是数据库中的对象&#xff0c;因为在DBA_OBJECTS中根本找不到它&#xff0c;而在STANDARD和DBMS_STANDARD包中也找不到函数说明。 SQL> SELECT * 2 FROM DBA_OBJECTS 3 WHERE OBJECT_NAME…
阅读更多...
基于Java的百度AOI数据解析与转换的实现方法

基于Java的百度AOI数据解析与转换的实现方法

目录 前言 一、AOI数据结构简介 1、官网的实例接口 2、响应参数介绍 二、Java对AOI数据的解析 1、数据解析流程图 2、数据解析实现 3、AOI数据解析成果 三、总结 前言 在当今信息化社会&#xff0c;地理信息数据在城市规划、交通管理、商业选址等领域扮演着越来越重要的…
阅读更多...
深度学习中的学习率调度器（scheduler）分析并作图查看各方法差异

深度学习中的学习率调度器（scheduler）分析并作图查看各方法差异

文章目录 1. 指数衰减调度器&#xff08;Exponential Decay Scheduler&#xff09;工作原理适用场景实现示例 2. 余弦退火调度器&#xff08;Cosine Annealing Scheduler&#xff09;工作原理适用场景实现示例 3. 步长衰减调度器&#xff08;Step Decay Scheduler&#xff09;工…
阅读更多...
IPSEC实验

IPSEC实验

实验要求 某小型企业为扩大网络规模&#xff0c;设立分公司&#xff0c;今日要求分公司能够访问主公司对应的资源&#xff0c;为此很是苦恼 为满足其跨区域访问对端网络的要求&#xff0c;现要求使用IPSEC搭建隧道使得分公司能够与主公司通讯 实验拓扑 该公司与分公司拓扑大…
阅读更多...
[c语言日寄]精英怪：三子棋（tic-tac-toe）3命慢通[附免费源码]

[c语言日寄]精英怪：三子棋（tic-tac-toe）3命慢通[附免费源码]

哈喽盆友们&#xff0c;今天带来《c语言》游戏中[三子棋boss]速通教程&#xff01;我们的目标是一边编写博文&#xff0c;一边快速用c语言实现三子棋游戏。准备好瓜子&#xff0c;我们计时开始&#xff01; 前期规划 在速通中&#xff0c;我们必须要有清晰的前期规划&#xf…
阅读更多...
TensorFlow DAY3: 高阶 API（Keras，Estimator）（完）

TensorFlow DAY3: 高阶 API（Keras，Estimator）（完）

TensorFlow 作为深度学习框架&#xff0c;当然是为了帮助我们更便捷地构建神经网络。所以&#xff0c;本次实验将会了解如何使用 TensorFlow 来构建神经网络&#xff0c;并学会 TensorFlow 构建神经网络的重要函数和方法。 知识点 Keras 顺序模型Keras 函数模型Keras 模型存储…
阅读更多...
数据结构(Java版)第九期：LinkedList与链表

数据结构(Java版)第九期：LinkedList与链表

专栏&#xff1a;数据结构(Java版) 个人主页&#xff1a;手握风云 目录 一、LinkedList的模拟实现 1.1. 头插法 1.2. 尾插法 1.3. 插入中间节点 1.4. 删除某个节点 1.5. 删除所有为key的元素 二、LinkedList的使用 2.1. 什么是LinkedList 2.2. LinkedList的使⽤ 三、…
阅读更多...
ubuntu18.04开发环境下samba服务器的搭建

ubuntu18.04开发环境下samba服务器的搭建

嵌入式linux的发展很快&#xff0c;最近准备在一个新项目上采用新一代的linux核心板&#xff0c;发现linux内核的版本已经更新到5.4以上甚至6.0以上&#xff1b;之前常用的linux内核版本是2.6.4&#xff0c;虽然在某些项目上还能用但是明显跟不上时代的步伐了&#xff0c;所以要…
阅读更多...
【优先算法】滑动窗口--（结合例题讲解解题思路）（C++）

【优先算法】滑动窗口--（结合例题讲解解题思路）（C++）

目录 1. 例题1&#xff1a;最大连续1的个数 1.1 解题思路 1.2代码实现 1.3 错误示范如下&#xff1a;我最开始写了一种&#xff0c;但是解答错误&#xff0c;请看&#xff0c;给大家做个参考 2. 将 x 减到 0 的最小操作数 2.1解题思路 2.2代码实现 1. 例题1&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023