当前位置：首页 > news >正文

Vue ui初始化项目并使用iview写一个菜单导航

news 来源：原创 2025/7/6 4:58:38

win+R
输入命令

vue ui

浏览器会自动打开http://localhost:8000/
找到创建

image.png

选择一个目录创建vue项目

image.png

点击再此创建新项目

image.png

我一般都是再已经有git仓库的目录进行项目创建，所以这个勾去掉
点击下一步

image.png

这里可以选择默认，我这边选择手动，方便以后初始化项目时不用每次去配

image.png

把常用的几个插件都打上勾

image.png

给预设设置一个名称

image.png

将我们初始化的项目跑起来

image.png

成功

使用iview写一个示例

image.png

添加一个前端框架，这里选择iview，依赖和插件都装一下

image.png

配置插件

第一个是按需引入或者全局引入，为了方便一般都全局引入
第二个是如果自定义主题颜色时需要打开，正常情况下都不需要

定制主题

image.png

第二个勾上就会多这个文件，用户定制主题，可以将示例的@primary-color去掉
https://github.com/view-design/ViewUI/blob/master/src/styles/custom.less

新建 vue.config.js

module.exports = {chainWebpack: config => {config.module.rule('vue').use('iview').loader('iview-loader').options({prefix: false})},
}

编写一个导航菜单

修改App.vue

<template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'app',components: {}
}
</script><style>
#app {}
</style>

修改Home.vue

<template><div><Menu active-name="1"><MenuGroup title="内容管理"><MenuItem name="1" :to="{path:'/home/menu1'}"><Icon type="md-document"/>菜单1</MenuItem><MenuItem name="2" :to="{path:'/home/menu2'}"><Icon type="md-chatbubbles" />菜单2</MenuItem></MenuGroup></Menu><router-view></router-view></div>
</template><script>export default {components: {}
}
</script>

添加两个Vue文件，内容随便填

image.png

修改路由 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const title = '网页标题'
const routes = [{path: '/',redirect: '/home/menu1',meta: {title: title},},{path: '/home',name: 'Home',component: () => import('../views/Home.vue'),meta: {title: title},children: [{path: 'menu1',component: () => import('../views/Menu1.vue'),meta: {title: title + '-菜单1'},},{path: 'menu2',component: () => import('../views/Menu2.vue'),meta: {title: title + '-菜单2'},},]}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

解决ie兼容性文件
修改 babel.config.js

module.exports = {presets: [['@vue/app', {useBuiltIns: 'entry',polyfills: ['es6.promise','es6.symbol']}]]
}

修改main.js

// 解决低版本兼容性问题
import 'core-js'import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/iview.js'Vue.config.productionTip = falsedocument.title = ''
router.beforeEach((to, from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}next()
})new Vue({router,store,render: h => h(App)
}).$mount('#app')

喜欢的朋友记得点赞、收藏、关注哦！！！

Vue ui初始化项目并使用iview写一个菜单导航

winR 输入命令 vue ui浏览器会自动打开http://localhost:8000/ 找到创建 image.png 选择一个目录创建vue项目 image.png 点击再此创建新项目 image.png 我一般都是再已经有git仓库的目录进行项目创建，所以这个勾去掉点击下一步 image.png 这里可以选择默认&#x…...

编程日记 2025/7/6 4:58:38

函数调用及Chain——SQL+GLM

Langchainchain数据库操作_langchain 操作数据库-CSDN博客本文和基于上述链接进一步。初始化数据库&模型 # temperature0，此处仅需要SQL语句，不需要多样化返回。 from langchain.chains.sql_database.query import create_sql_query_chain from …...

编程日记 2025/7/4 4:34:30

数据科学与计算

Seaborn的介绍 Seaborn 是一个建立在 Matplotlib 基础之上的 Python 数据可视化库，专注于绘制各种统计图形，以便更轻松地呈现和理解数据。 Seaborn 的设计目标是简化统计数据可视化的过程，提供高级接口和美观的默认主题，使得用户…...

编程日记 2025/7/6 4:06:35

【AI提示词】二八法则专家

提示说明精通二八法则（帕累托法则）的广泛应用，擅长将其应用于商业、管理、个人发展等领域，深入理解其在不同场景中的具体表现和实际意义。提示词 # Role: 二八法则专家## Profile - language: 中文 - description: 精通二八法…...

编程日记 2025/7/6 2:58:56

PostgreSQL Patroni集群组件作用介绍：Patroni、etcd、HAProxy、Keepalived、Watchdog

1. Watchdog 简介 1.1 核心作用 • 主节点故障检测 Watchdog 会定时检测数据库主节点（或 Pgpool 主节点）的运行状态。一旦主节点宕机，它会发起故障切换请求。 • 协调主备切换多个 Pgpool 节点时，Watchdog 保证只有一个 Pg…...

编程日记 2025/7/6 2:59:37

【计算机视觉】图像分割：Segment Anything (SAM)：通用图像分割的范式革命

Segment Anything：通用图像分割的范式革命技术突破与架构创新核心设计理念关键技术组件环境配置与快速开始硬件要求安装步骤基础使用示例深度功能解析1. 多模态提示融合2. 全图分割生成3. 高分辨率处理模型微调与定制1. 自定义数据集准备2. 微调训练配置常见问…...

编程日记 2025/7/6 4:50:51

改进系列（10）：基于SwinTransformer+CBAM+多尺度特征融合+FocalLoss改进：自动驾驶地面路况识别

目录 1.代码介绍 1. 主训练脚本train.py 2. 工具函数与模型定义utils.py 3. GUI界面应用infer_QT.py 2.自动驾驶地面路况识别 3.训练过程 4.推理 5.下载代码已经封装好，对小白友好。想要更换数据集，参考readme文件摆放好数据集即可&#xff0c…...

编程日记 2025/7/6 4:35:19

大型连锁酒店集团数据湖应用示例

目录一、应用前面临的严峻背景二、数据湖的精细化构建过程 （一）全域数据整合规划 （二）高效的数据摄取与存储架构搭建 （三）完善的元数据管理体系建设 （四）强大的数据分析平台…...

编程日记 2025/7/6 4:07:30

element.scrollIntoView(options)

handleNextClick 函数详解功能描述该函数实现在一个表格中“跳转到下一行”的功能，并将目标行滚动至视图顶部。通常用于导航或高亮显示当前选中的数据行。 const handleNextClick () > {// 如果当前已经是最后一行，则不执行后续操作if (current…...

编程日记 2025/7/6 3:20:21

python查看指定的进程是否存在

import os class Paly_Install(object):"""项目根目录"""def get_path(self):self.basedir os.path.dirname(os.path.abspath(__file__))"""安装失败的txt文件"""def test_app(self):self.app["com.faceboo…...

编程日记 2025/7/4 4:34:14

HAproxy+keepalived+tomcat部署高可用负载均衡实践

目录一、前言二、服务器规划三、部署 1、jdk18安装 2、tomcat安装 3、haproxy安装 4、keepalived安装三、测试 1、服务器停机测试 2、停止haproxy服务测试总结一、前言 HAProxy是一个使用C语言编写的自由及开放源代码软件，其提供高可用性、…...

编程日记 2025/7/6 4:16:11

C++负载均衡远程调用学习之自定义内存池管理

目录 1.内存管理_io_buf的结构分析 2.Lars_内存管理_io_buf内存块的实现 3.buf总结 4.buf_pool连接池的单例模式设计和基本属性 5.buf_pool的初始化构造内存池 6.buf_pool的申请内存和重置内存实现 7.课前回顾 1.内存管理_io_buf的结构分析 ## 3) Lars系统总体架构 …...

编程日记 2025/7/5 19:14:19

mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz的下载安装和使用

资源获取链接： mysql-5.7.24-linux-glibc2.12-x86-64.tar.gz和使用说明资源-CSDN文库详细作用数据库服务器的核心文件： 这是一个压缩包，解压后包含 MySQL 数据库服务器的可执行文件、库文件、配置文件模板等。它用于在 Linux 系统上安装…...

编程日记 2025/7/6 4:17:04

Kafka Producer的acks参数对消息可靠性有何影响？

1. acks0 可靠性最低生产者发送消息后不等待任何Broker确认可能丢失消息（Broker处理失败/网络丢失时无法感知）吞吐量最高，适用于允许数据丢失的场景（如日志收集） 2. acks1 (默认值) Leader副本确认模式生产者等待Le…...

编程日记 2025/7/5 19:59:39

Linux-04-用户管理命令

一、useradd添加新用户: 基本语法: useradd 用户名:添加新用户 useradd -g 组名用户:添加新用户到某个组二、passwd设置用户密码: 基本语法: passwd 用户名:设置用户名密码三、id查看用户是否存在: 基本语法: id 用户名四、su切换用户: 基本语法: su 用户名称:切换用…...

编程日记 2025/7/5 18:40:47

node爬虫包 pup-crawler，超简单易用

PUP Crawler 这是一个基于puppeteer的简单的爬虫，可以爬取动态、静态加载的网站。常用于【列表-详情-内容】系列的网站，比如电影视频等网站。 github地址 Usage npm install pup-crawler简单用法： import { PupCrawler } from pup-craw…...

编程日记 2025/7/6 4:18:31

艺术与科技的双向奔赴——高一鑫荣获加州联合表彰

2025年4月20日,在由M.A.D公司协办的“智艺相融,共赴价值巅峰”(Academic and Artistic Fusion Tribute to the Summit of Value)主题发布会上,音乐教育与科技融合领域的代表人物高一鑫,因其在数字音乐教育与中美文化交流方面的杰出贡献,荣获了圣盖博市议员Jorge Herrera和尔湾市…...

编程日记 2025/7/6 4:26:40

React-Native Android 多行被截断

1. 问题描述： 如图所示： 2. 问题解决灵感： 使用相同的react-native代码，运行在两个APP（demo 和 project）上。demo 展示正常，project 展示不正常。对两个页面截图，对比如下。得出…...

编程日记 2025/7/5 13:16:27

Canvas基础篇：图形绘制

Canvas基础篇：图形绘制图形绘制moveTo()lineTo()lineTo绘制一条直线代码示例效果预览 lineTo绘制平行线代码示例效果预览 lineTo绘制矩形代码示例效果预览 arc()arc绘制一个圆代码实现效果预览 arc绘制一段弧代码实现效果预览 arcTo()rect()曲线结语图形绘制在…...

编程日记 2025/7/6 4:43:46

自定义实现elementui的锚点

背景前不久有个需求，上半部分是el-step步骤条，下半部分是一些文字说明，需要实现点击步骤条中某个步骤自定义定位到对应部分的文字说明，同时滚动内容区域的时候还要自动选中对应区域的步骤。element-ui-plus的有锚点这个组件&…...

编程日记 2025/7/4 4:33:58

基于UNet算法的农业遥感图像语义分割——补充版

前言本案例希望建立一个UNET网络模型，来实现对农业遥感图像语义分割的任务。本篇博客主要包括对上一篇博客中的相关遗留问题进行解决，并对网络结构进行优化调整以适应个人的硬件设施——NVIDIA GeForce RTX 3050。本案例的前两篇博客直达链接基于UNe…...

编程日记 2025/7/4 4:33:56

分布式数字身份：迈向Web3.0世界的通行证 | 北京行活动预告

数字经济浪潮奔涌向前，Web3.0发展方兴未艾，分布式数字身份（Decentralized Identity，简称DID）通过将分布式账本技术与身份治理相融合，在Web3.0时代多方协作的分布式应用场景中发挥核心作用，是构建…...

编程日记 2025/7/3 5:44:18

CentOS网络之network和NetworkManager深度解析

文章目录 CentOS网络之network和NetworkManager深度解析1. CentOS网络服务发展历史1.1 传统network阶段（CentOS 5-6）1.2 过渡期（CentOS 7）1.3 新时代（CentOS 8） 2. network和NetworkManager的核心区别3. ne…...

编程日记 2025/7/6 4:52:27

【XR】MR芯片和 VR芯片之争

【XR】MR芯片和 VR芯片之争 1. MR芯片和 VR芯片之间的最大差异是什么2. MR芯片和 VR芯片之间的最大差异是什么，国内外市场上有哪些芯片，价格如何，市场怎么样，芯片价格怎么样1. MR芯片和 VR芯片之间的最大差异是什么 MR芯片（混合现实芯片）与VR芯片（虚拟现实芯片）…...

编程日记 2025/7/6 4:41:43

关于安卓自动化打包docker+jenkins实现

背景安卓开发过程中，尤其是提测后，会有一个发包的流程。这个流程简单来说，一般都是开发打包，然后发群里，测试再下载，发送到分发平台，然后把分发平台的应用主页发出来，最后群里面的…...

编程日记 2025/7/6 3:21:11

如何使用CAN分析仪验证MCU CAN错误机制

本文通过实验验证CAN控制器的错误处理机制是否符合相关标准。具体而言，我们使用ZPS-CANFD设备（ZPS-CANFD介绍）作为测量工具，USBCANFD-200U作为被测设备（DUT），通过注入特定类型的错误&#xff0c…...

编程日记 2025/7/4 4:33:48

Centos 7安装 NVIDIA CUDA Toolkit

下载 # 查看操作系统信息 uname -m && cat /etc/redhat-release # 查看显卡信息 lspci | grep -i nvidia从NVIDIA CUDA Toolkit官网下载符合你需求的版本，我这里选择的是runfile(local)的方式。安装现在完成后进行安装 chmod x cuda_12.4.0_550.54.1…...

编程日记 2025/7/4 4:33:46

软件测试52讲学习分享：深入理解单元测试

课程背景最近我在学习极客时间的《软件测试52讲》课程，这是由腾讯TEG基础架构部T4级专家茹炳晟老师主讲的认证课程。作为数字化转型与人工智能(DTAI)产业人才基地建设中心的认证课程，内容非常专业实用。今天想和大家分享第3讲"什么是单元测试&…...

编程日记 2025/7/6 3:11:40

90.如何将Maui应用安装到手机（最简） C#例子 Maui例子

今天我来分享一下如何将Maui应用安装到手机上进行测试。首先，创建一个新的Maui应用项目。点击运行在Visual Studio中，点击“运行”按钮，预览应用的初始效果，确保一切正常。连接设备使用数据线将手机连接到电脑。确保手机已…...

编程日记 2025/7/6 4:44:37

“100% 成功的 PyTorch CUDA GPU 支持” 安装攻略

#工作记录一、总述在深度学习领域，PyTorch 凭借其灵活性和强大的功能，成为了众多开发者和研究者的首选框架。而 CUDA GPU 支持能够显著加速 PyTorch 的计算过程，大幅提升训练和推理效率。然而，安装带有 CUDA GPU 支持的 PyTor…...

编程日记 2025/7/6 0:03:12

如何在Dify沙盒中安装运行pandas、numpy

如何在Dify沙盒中安装运行pandas、numpy 1. 创建python-requirements.txt文件2. 创建config.yaml文件3. 重启 docker-sandbox-14. 为什么要这样改的一些代码解析（Youtube视频截图） 1. 创建python-requirements.txt文件在 Dify 的 Docker 目录下面&…...

编程日记 2025/7/6 3:10:46

ES集群搭建及工具类

文章说明本文主要记录Windows下搭建ES集群的过程，并提供了一个通用的ES工具类；工具类采用http接口调用es功能，目前仅提供了简单的查询功能，可在基础上额外扩展集群搭建 ES的下载安装非常简单，只需要下载软件的 zip 压…...

编程日记 2025/7/5 19:32:30

抓取工具Charles配置教程（mac电脑+ios手机）

mac电脑上的配置 1. 下载最新版本的Charles 2. 按照以下截图进行配置 2.1 端口号配置： 2.2 https配置 3. mac端证书配置 4. IOS手机端网络配置 4.1 先查看电脑上的配置 4.2 配置手机网络连接和电脑同一个wifi，然后按照以下截图进行配置 5. 手机端证书…...

编程日记 2025/7/6 3:49:36

JavaScript 代码搜索框

1. 概述与需求分析功能：在网页中实时搜索用户代码、关键字；展示匹配行、文件名；支持高亮、正则、模糊匹配。非功能：大文件集（几十万行）、高并发、响应 <100ms；支持增量索引和热更新。 2. …...

编程日记 2025/7/4 4:33:32

ESP32开发-作为TCP服务端接收数据

ESP32 ENC28J60 仅作为TCP服务端 （电脑通过网络调试助手连接ESP32，实现双向通信） 完整代码 #include <SPI.h> #include <EthernetENC.h> // 或 UIPEthernet.h// 网络配置 byte mac[] {0xDE, 0xAD…...

编程日记 2025/7/3 19:42:04

数智化招标采购系统针对供应商管理解决方案（采购如何管控供应商）

随着《优化营商环境条例》深化实施，采购领域正通过政策驱动和技术赋能，全面构建供应商全生命周期管理体系，以规范化、数智化推动采购生态向透明、高效、智能方向持续升级。郑州信源数智化招标采购系统研发商，通过供应商管理子系…...

编程日记 2025/7/6 4:50:51

注入示例 # step 1 SQL SELECT * FROM users WHERE username admin AND password e10adc3949ba59abbe56e057f20f883e # step 2 SQL SELECT * FROM users WHERE username admin# AND password 96e79218965eb72c92a549dd5a330112 关键点是这2个SQL的区别.其中第二步由于前台传…...

编程日记 2025/7/4 4:33:27

章越科技赋能消防训练体征监测与安全保障，从传统模式到智能跃迁的实践探索

引言：智能化转型浪潮下，消防训练的“破局”之需 2021年《“十四五”国家消防工作规划》的出台，标志着我国消防救援体系正式迈入“全灾种、大应急”的全新阶段。面对地震、洪涝、危化品泄漏等复杂救援场景，消防员不仅需要更强的体…...

编程日记 2025/7/6 4:46:05

RSYSLOG收集深信服log

RSYSLOG收集深信服ATRUST日志配置一直不成功，没有生成log文件，网上搜索到：如果你想要接收所有来自特定 IP 的日志，可以使用更通用的模式： 参考着修改配置 if $fromhost-ip 172.18.1.13 then /data/logs/network-devi…...

编程日记 2025/7/6 3:02:26

Golang - 实现文件管理服务器

先看效果： 代码如下： package mainimport ("fmt""html/template""log""net/http""os""path/filepath""strings" )// 配置根目录（根据需求修改） //var ba…...

编程日记 2025/7/6 4:00:41

在原生代码（非webpack）里使用iview的注意事项

最近公司在做一个项目，使用的框架是iview,使用过程中同事遇到一些问题，这些问题对于有些同学来说根本就不是问题，但总会有同学需要，为了帮助不太会用的同学快速找到问题，做了如下整理： 下载vue,iview.min.j…...

编程日记 2025/7/6 3:42:25

基于go的简单管理系统（增删改查）

package mainimport ("database/sql""fmt"_ "github.com/go-sql-driver/mysql" )var db *sql.DBtype user struct {id intname stringage int }// 建立连接 func initDB() (err error) {dsn : "root:123456tcp(127.0.0.1:3306)/mysqltes…...

编程日记 2025/7/4 4:33:17

Python 用一等函数重新审视“命令”设计模式

引言在软件开发中，设计模式是解决常见问题的有效方法。“命令”设计模式旨在解耦调用操作的对象（调用者）和提供实现的对象（接收者）。本文将深入探讨“命令”模式，并介绍如何使用一等函数对其进行简化。 …...

编程日记 2025/7/4 4:33:15

pycharm导入同目录下文件未标红但报错ModuleNotFoundError

此贴仅为记录debug过程，为防后续再次遇见问题问题情境复现文章模型，pycharm项目初次运行问题描述在导入同目录下其它文件夹中的python文件时，未标红，但运行时报错ModuleNotFoundError 报错信息未找到该模块 Traceback …...

编程日记 2025/7/6 4:44:36

BOSS的收入 - 华为OD机试（A卷，Java题解）

华为OD机试题库《C》限时优惠 9.9 华为OD机试题库《Python》限时优惠 9.9 华为OD机试题库《JavaScript》限时优惠 9.9 代码不懂有疑问欢迎留言或私我们的VX：code5bug。题目描述一个 XX 产品行销总公司，只有一个 boss，其有若干一级分销&…...

编程日记 2025/7/3 4:53:51

Qt:（创建项目）

目录 1. 使⽤QtCreator新建项⽬ 1.1 新建项⽬ 1.2 选择项⽬模板 1.3 选择项⽬路径 1.4 选择构建系统 1.5 填写类信息设置界⾯编辑 1.6 选择语⾔和翻译⽂件 1.6 选择Qt套件 1.7 选择版本控制系统 1.8 最终效果 1. 使⽤QtCreator新建项⽬ 1.1 新建项⽬打开Qt…...

编程日记 2025/7/4 4:33:09

网络原理 - 12（HTTP/HTTPS - 3 - 响应）

目录认识“状态码”（status code） 200 OK 404 Not Found 403 Forbidden 405 Method Not Allowed 500 Internal Server Error 504 Gateway Timeout 302 Move temporarily 301 Moved Permanently 418 I am a teaport 状态码小结： …...

编程日记 2025/7/4 4:33:06

OpenCV 4.7企业级开发实战：从图像处理到目标检测的全方位指南

简介 OpenCV作为工业级计算机视觉开发的核心工具库，其4.7版本在图像处理、视频分析和深度学习模型推理方面实现了显著优化。本文将从零开始，系统讲解OpenCV 4.7的核心特性和功能更新，同时结合企业级应用场景，提供详细代码示例和实战项目，帮助读者掌握从基础图像处理到复…...

编程日记 2025/7/4 4:33:05

QT6 源（63）篇六：阅读与注释 QString 这个类，包含了 QString 类的完整源码，也附上 QLatin1String 类的

（9）给出完整的源代码： #ifndef QSTRING_H #define QSTRING_H//验证了，没有此宏定义的 #if 不成立 #if defined(QT_NO_CAST_FROM_ASCII) && defined(QT_RESTRICTED_CAST_FROM_ASCII) #error QT_NO_CAST_FROM_ASCII a…...

编程日记 2025/7/3 7:30:42

PixONE 六维力传感器：赋能 OEM 机器人，12 自由度精准感知

The PixONE，一款为OEM设计的多模态12自由度机器人传感器，以其卓越的性能和广泛的适用性，正引领着机器人传感技术的革新。这款传感器不仅外观精致，达到IP68防护等级，易于消毒，而且其中心的大孔设计使得电缆和…...

编程日记 2025/7/5 5:55:15

使用iview写一个示例

配置插件

定制主题

新建 vue.config.js

编写一个导航菜单

修改App.vue

修改Home.vue

修改路由 router/index.js

相关文章：