谷粒商城实战笔记-44-前端基础-Vue-整合ElementUI快速开发/设置模板代码

news2024/11/25 12:48:19

文章目录

  • 一，安装导入ElementUI
    • 1，安装 element-ui
    • 2，导入 element-ui
  • 二，ElementUI 实战
    • 1，将 App.vue 改为 element-ui 中的后台布局
    • 2，开发导航栏
      • 2.1 开发MyTable组件
      • 2.2 注册路由
      • 2.3 改造App.vue
      • 2.4 新增左侧菜单
  • 三，配置Vue单文件组件模板

本节在上一节用Vue脚手架创建的工程基础上，整合ElementUI。

一，安装导入ElementUI

Element UI是一款基于Vue 2.0的桌面端UI组件库，提供了丰富的界面组件，如按钮、表格、表单等，旨在帮助开发者快速构建美观、高效的应用程序。它广泛应用于企业级项目中，是Vue生态中流行的前端开发工具之一。

ElementUI官网：https://element.eleme.cn/#/zh-CN/component/installation

1，安装 element-ui

我们使用npm管理包，使得安装第三方包变得非常容易。只需要执行下面命令就可以安装elemtent-ui。

npm i element-ui

2，导入 element-ui

在 main.js 中引入 element-ui 就可以全局使用了。

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

二，ElementUI 实战

准备工作做好之后，开始实战吧。

在上一篇用脚手架创建的工程基础上，使用ElmentUi进行开发。

1，将 App.vue 改为 element-ui 中的后台布局

在ElementUI官网找到组件Container 布局容器，直接copy代码到App.vue。

在这里插入图片描述

代码：

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>导航一</template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i>导航三</template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

<style>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

效果：

在这里插入图片描述
不到一分钟的时间可以开发出一个常见的布局，这就是使用Vue和ElementUI带来的效率的提升。

2，开发导航栏

接下来，在左侧导航栏增加两个菜单，点击菜单右侧显示对应界面。

在这里插入图片描述

为实现这个需求，先要将表格抽象为一个组件。

2.1 开发MyTable组件

开发一个Vue单文件MyTable.vue，包含三部分：

  • template
  • script
  • style
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="140"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

2.2 注册路由

在router/index.js文件中注册路由。

	{
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }

2.3 改造App.vue

因为要根据左侧菜单动态切换，需要使用router-view组件，router-view相当于一个占位组件，后续会根据路由被指定的组件替换。

在这里插入图片描述

2.4 新增左侧菜单

在App.vue界面，新增菜单。

<el-menu-item-group>
	<template slot="title">練習用的</template>
	<el-menu-item index="/hello">去Hello</el-menu-item>
	<el-menu-item index="/table">展示table</el-menu-item>
</el-menu-item-group>

注意，使用到组件el-menu，参照官网，做如下配置：

  • ① el-menu 添加 router 属性
 <el-menu :default-openeds="['1', '3']" router=true>
  • ② el-menu-item 通过 index 需要跳转的地址
<el-menu-item index="/hello">去Hello</el-menu-item>
<el-menu-item index="/table">展示table</el-menu-item>

App.vue文件的完整代码：

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']" router=true>
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>导航一</template
            >
            <el-menu-item-group>
              <template slot="title">練習用的</template>
              <el-menu-item index="/hello">去Hello</el-menu-item>
              <el-menu-item index="/table">展示table</el-menu-item>
            </el-menu-item-group>
           
          </el-submenu>
         
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data() {
      
    }
  };
</script>

<style>

</style>

三，配置Vue单文件组件模板

在VSCode中使用代码片段（Snippets）可以极大地提高编写代码的效率，特别是在处理像Vue单文件组件（SFCs - Single File Components）这样的结构化代码时。

代码片段允许你通过输入简短的文本字符串来自动扩展成更复杂的代码块，从而节省时间和减少重复工作。

在VSCode，选择File->Preferences->Configure User Snippets。

在这里插入图片描述

选择“New Global Sinppets file…”。

在这里插入图片描述
输入名称，比如vue后按回车，就会打开一个vue.json的文件，复制下面内容到文件中并保存。

{
	"生成 vue 模板": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"//import 引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"return {",
			"",
			"};",
			"},",
			"//计算属性 类似于 data 概念",
			"computed: {},",
			"//监控 data 中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"//生命周期 - 创建完成（可以访问当前 this 实例）",
			"created() {",
			"",
			"},",
			"//生命周期 - 挂载完成（可以访问 DOM 元素）",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
			"activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发","}",
			"</script>",
			"<style scoped>",
			"//@import url($3); 引入公共 css 类",
			"$4",
			"</style>"
		],
		"description": "生成 vue 模板"
	}
}

之后，只要在代码编写中输入vue，就会有如下提示，右侧的备注，确定之后按回车，就会自动插入大段模板代码。
在这里插入图片描述

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

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

相关文章

传统行业 IT 团队数字化转型该如何进行？

传统行业 IT 团队数字化转型该如何进行？

一、前言 数字化转型概念&#xff1a; 数字化转型是“以更加数字化的方式重新思考&#xff0c;重新塑造商业。是从根本上考虑交付渠道&#xff0c;运营&#xff0c;市场和销售以及顾客关注——所有的业务模块&#xff0c;并重新思考这些能否包装成新的数字化产品和服务&#…
阅读更多...
基于微信小程序+SpringBoot+Vue的青少年科普教学系统平台(带1w+文档)

基于微信小程序+SpringBoot+Vue的青少年科普教学系统平台(带1w+文档)

基于微信小程序SpringBootVue的青少年科普教学系统平台(带1w文档) 基于微信小程序SpringBootVue的青少年科普教学系统平台(带1w文档) 这个工具就是解决上述问题的最好的解决方案。它不仅可以实时完成信息处理&#xff0c;还缩短高校教师成果信息管理流程&#xff0c;使其系统化…
阅读更多...
挖掘基于边缘无线协同感知的低功耗物联网 (LPIOT) 的巨大潜力

挖掘基于边缘无线协同感知的低功耗物联网 (LPIOT) 的巨大潜力

关键词&#xff1a;边缘无线协同感知、低功耗物联网(LPIOT)、无线混合组网、用电监测、用电计量、多角色、计量插座、无线场景感知、多角色运用、后台边缘层&#xff0c;网络边缘层&#xff0c;场景能效管理&#xff0c;场景能耗计算 在数字化和智能化日益加速的今天&#xff…
阅读更多...
Elasticsearch：Java ECS 日志记录 - log4j2

Elasticsearch：Java ECS 日志记录 - log4j2

ECS 记录器是你最喜欢的日志库的格式化程序/编码器插件。它们可让你轻松将日志格式化为与 ECS 兼容的 JSON。ECS 兼容的 JSON 日志记录可以帮我们简化很多分析&#xff0c;可视化及解析的工作。在今天的文章里&#xff0c;我来详述如何在 Java 应用里生成 ECS 相兼容的日志。 …
阅读更多...
路由器ip地址脱机是什么意思？怎么应对

路由器ip地址脱机是什么意思？怎么应对

在数字化时代&#xff0c;路由器作为家庭或企业网络连接的核心设备&#xff0c;其稳定性和连通性对于我们的网络体验至关重要。然而&#xff0c;有时我们可能会遇到路由器IP地址显示脱机的情况&#xff0c;这不仅影响了我们的网络访问&#xff0c;还可能对工作和娱乐造成不便。…
阅读更多...
嵌入式C/C++、FreeRTOS、STM32F407VGT6和TCP：智能家居安防系统的全流程介绍（代码示例）

嵌入式C/C++、FreeRTOS、STM32F407VGT6和TCP：智能家居安防系统的全流程介绍（代码示例）

1. 项目概述 随着物联网技术的快速发展,智能家居安防系统越来越受到人们的重视。本文介绍了一种基于STM32单片机的嵌入式安防中控系统的设计与实现方案。该系统集成了多种传感器,实现了实时监控、报警和远程控制等功能,为用户提供了一个安全、可靠的家居安防解决方案。 1.1 系…
阅读更多...
自动驾驶---视觉Transformer的应用

自动驾驶---视觉Transformer的应用

1 背景 在过去的几年&#xff0c;随着自动驾驶技术的不断发展&#xff0c;神经网络逐渐进入人们的视野。Transformer的应用也越来越广泛&#xff0c;逐步走向自动驾驶技术的前沿。笔者也在博客《人工智能---什么是Transformer?》中大概介绍了Transformer的一些内容&#xff1a…
阅读更多...
Unity DOTS中的world

Unity DOTS中的world

Unity DOTS中的world 注册销毁逻辑自定义创建逻辑创建world创建system group插入player loopReference DOTS中&#xff0c;world是一组entity的集合。entity的ID在其自身的世界中是唯一的。每个world都拥有一个EntityManager&#xff0c;可以用它来创建、销毁和修改world中的en…
阅读更多...
ssh到huawei交换机

ssh到huawei交换机

import re from netmiko import ConnectHandlerips [ 10.32.5.130, 10.32.5.131, 10.32.5.132, 10.32.5.133, 10.32.5.134, 10.32.5.135, ]for ip in ips:hw_fw {device_type: huawei,host: ip, username: 493031,password: 密码,port: 22 }net_connect ConnectHandler(*…
阅读更多...
力扣第二十五题——K个一组反转链表

力扣第二十五题——K个一组反转链表

内容介绍 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内…
阅读更多...
centos/Ubuntu安装Nginx服务器

centos/Ubuntu安装Nginx服务器

安装方式 使用系统自带的软件包管理器快速安装&#xff08;如centos的yum&#xff09;到官网下载压缩包安装&#xff08;https://nginx.org/en/download.html&#xff09;docker容器实例 下面是昨天以第二种方式安装的命令小记&#xff01; centos # 下载&#xff08;https…
阅读更多...
Web开发：ASP.NET CORE使用Ajax定时获取后端数据

Web开发：ASP.NET CORE使用Ajax定时获取后端数据

一、低难度&#xff08;刷新a标签&#xff09; 1、需求 给a标签每15s刷新一次&#xff0c;显示最新的时间&#xff08;时间必须由后端获取&#xff09; 应该如何操作呢 2、代码 后端 using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using Mi…
阅读更多...
【专题】百度萝卜快跑体验：Robotaxi发展现状与展望报告合集PDF分享（附原数据表）

【专题】百度萝卜快跑体验：Robotaxi发展现状与展望报告合集PDF分享（附原数据表）

原文链接&#xff1a; https://tecdat.cn/?p37054 百度“萝卜快跑”近期因事故与抵制引发关注&#xff0c;武汉部署超300辆全无人驾驶车。体验显示其安全但策略保守&#xff0c;行驶效率低于人类司机&#xff0c;价格亲民。阅读原文&#xff0c;获取专题报告合集全文&#xf…
阅读更多...
第2章-数学建模

第2章-数学建模

目录 一、数据类型 【函数】&#xff1a; &#xff08;1&#xff09;find()、rfind()、index()、rindex()、count() &#xff08;2&#xff09;split()、rsplit() &#xff08;3&#xff09;join() &#xff08;4&#xff09;strip()、rstrip()、lstrip() &#xff08;5&…
阅读更多...
物联网mqtt网关搭建背后的技术原理

物联网mqtt网关搭建背后的技术原理

前言 物联网是现在比较热门的软件领域&#xff0c;众多物联网厂商都有自己的物联网平台&#xff0c;而物联网平台其中一个核心的模块就是Mqtt网关。这篇文章的目的是手把手教大家写书写一个mqtt网关&#xff0c;后端存储支持Kafka/Pulsar&#xff0c;支持mqtt 连接、断链、发送…
阅读更多...
GPT盘新增容量后如何扩容？

GPT盘新增容量后如何扩容？

场景&#xff1a;一块5T的GPT盘&#xff0c;现有需求再加10T&#xff0c; 在虚拟化平台加10T盘后&#xff0c;机器不重启&#xff0c;执行命令 echo 1 > /sys/block/sdb/device/rescan刷新磁盘容量&#xff0c;可看到容量已刷出。 但执行fdisk /dev/sdb时&#xff0c;发现创…
阅读更多...
css class 多种规则判断样式

css class 多种规则判断样式

需求 商品分类选择变量 上下的分类需要添加圆角 这个就设计到多个分类的判断 解决方法 在class里面多写些判断 判断上下的分类 做成圆角即可 代码 <!-- html --> <view v-for"(item,index) in tabbar" :key"index" class"u-tab-ite…
阅读更多...
如何帮助自闭症儿童更好地控制面部表情

如何帮助自闭症儿童更好地控制面部表情

作为星贝育园自闭症康复学校的老师&#xff0c;帮助自闭症儿童更好地控制面部表情是我们工作中的一项重要任务。 在孩子进入星贝育园之前&#xff0c;我们会先对其进行个性化的观察报告。通过一段时间的仔细观察和评估&#xff0c;全面了解孩子的行为特点、能力优势以及…
阅读更多...
[css3] 如何设置边框颜色渐变

[css3] 如何设置边框颜色渐变

div {border: 4px solid;border-image: linear-gradient(to right, #8f41e9, #578aef) 1; }参考&#xff1a; 5种CSS实现渐变色边框&#xff08;Gradient borders方法的汇总
阅读更多...
linux/windows wps node.js插件对PPT状态监听并且通知其他应用

linux/windows wps node.js插件对PPT状态监听并且通知其他应用

需求背景 公司要求对Window系统&#xff0c;和国产操作系统&#xff08;UOS&#xff09;的wps 软件在 PPT开始播放 结束播放&#xff0c;和播放中翻页 上一页 下一页 等状态进行监听&#xff0c;并通知到我们桌面应用。 技术方案 开发WPS插件&#xff0c;使用node.JS 插件开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023