敏捷开发——elementUI/Vue使用/服务器部署
1. 创建vue项目
2. 安装element-ui组件库
npm i -S element-ui
或
npm install element-ui
3. 在main.js中导入element-ui组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
element-ui 组件库地址:Element - The world's most popular Vue UI framework
4. 运行 npm run serve后可以使用 ctr+c终止进程,再 y 确认终止
5. 默认展示 App.vue中的内容,因此要在 App.vue中引用其他 vue 中的内容
6. 例如引入 ElementView 中的内容:


7. 绑定的数据模型,必须在底下声明, v-model那些
8. 打包
使用命令 npm run build 或 在 npm脚本中直接运行 build,将文件打包进 dist 中
9. 将 dist 文件夹上传到服务器上
![]()
10. 安装 Apache 服务器并启动
sudo yum install httpd
sudo systemctl start httpd
sudo systemctl enable httpd
11. 部署静态网页
默认情况下,Apache 在 /var/www/html 目录下寻找要提供服务的文件。你可以将你的静态网页文件(例如 HTML、CSS、JavaScript 文件)放置到这个目录下。
示例
假设你有一个名为 index.html 的静态网页,你可以使用以下命令将其复制到 Apache 的默认目录下:
sudo cp /path/to/your/index.html /var/www/html/
![]()
模范案例:

相关文章:
敏捷开发——elementUI/Vue使用/服务器部署
1. 创建vue项目 2. 安装element-ui组件库 npm i -S element-ui或 npm install element-ui3. 在main.js中导入element-ui组件 import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI)element-ui 组件库地址:Element …...
uniapp 使用sqlite时无法读取到db文件中的数据
问题 {“code”:-1404,“message”:“android.database.sqlite.SQLiteException: no such table: user (Sqlite code 1): , while compiling: select * from user, (OS error - 2:No such file or directory),http://ask.dcloud.net.cn/article/282”} at pages/index/index.vu…...
Linux 网络接口管理
为了更深入的了解linux系统,为此做出网络接口管理的知识总结。看起来麻烦,其实一点都不难,相信多看多了解总会是没错的!❤️❤️ 一起加油吧!✨✨🎉🎉 文章目录 前言一、网络配置的文件介绍二、…...
【设计模式】Java 设计模式之模板策略模式(Strategy)
策略模式详解:模式结构、实现与应用场景 一、策略模式概述 策略模式是一种行为设计模式,它使得算法可以独立于使用它的客户端变化。策略模式使得算法可以在运行时切换,从而增强了系统的灵活性和可维护性。在策略模式中,我们定义…...
SpringBoot项目前端Vue访问后端(图片静态资源) 配置
静态资源配置 Configuration public class WebMvcConfig extends WebMvcConfigurationSupport {Value("${file.save-path}")private String fileSavePath;Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {//映射本地文件夹registry…...
colab中数据集保存到drive与取出的方法
from google.colab import drive drive.mount(/content/drive) 一、下载数据集 from datasets import load_dataset max_length 32 # Maximum length of the captions in tokens coco_dataset_ratio 50 # 50% of the COCO2014 dataset# Load the COCO2014 dataset for tr…...
React 应该如何学习?
学习 React 是现代 Web 前端开发中的重要一步,因为它是一个流行且强大的 JavaScript 库,用于构建用户界面。React 的学习过程需要掌握一系列的概念、技术和最佳实践。 1. 基础知识 1.1 HTML、CSS 和 JavaScript React 本质上是一个 JavaScript 库&…...
跨平台无缝操作:ShareMouse让多电脑协同更高效
ShareMouse是一款功能强大的鼠标和键盘共享软件,它支持多台计算机之间的无缝连接,让用户能够通过一套键鼠设备轻松控制多台电脑,提高工作效率。此外,ShareMouse还具备剪贴板共享、文件拖放等功能,实现不同计算机间的便…...
Vue使用pandoc-wasm进行各格式转换
前端使用pandoc-wasm的问题和建议 docx转md npm install --save pandoc-wasmimport { Pandoc } from "pandoc-wasm";const pandoc new Pandoc()pandoc.init().then(async (pandoc) > {const result await pandoc.run({text: "Some input text",opti…...
springboot284基于HTML5的问卷调查系统的设计与实现
问卷调查系统的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理,然而,随着近些年信息技术的迅猛发展,让许多比较老套的信息管理模式进行了更新迭代,问卷信息因为其管理内容繁杂,管理数量繁多导…...
AI短视频制作一本通:文本生成视频、图片生成视频、视频生成视频
第一部分:文本生成视频 1. 文本生成视频概述 随着人工智能(AI)技术的飞速发展,视频制作领域也迎来了创新的浪潮。文本生成视频是其中的一项令人激动的进展,它利用自然语言处理技术将文本内容转化为视频。这项技术在广…...
详谈分布式事务
目录 前言 1.sharding的分布式事务 2.分布式事务的产生原因 3.分布式事务的解决方案 3.1.DTP模型 3.2.分阶段提交 3.3.TCC模式 3.4.可靠消息服务 3.5.AT模式 3.6.Seata 前言 本文是前面一篇文章聊了基于sharding的分库分表后拓展出来的关于分布式事务的讨论…...
Java基础知识八股
1.为什么静态方法无法调用非静态方法? 回答:因为静态方法是随着类的加载而加载,而非静态方法则是随着类的实例化才会被加载,生存周期不一样,所以静态方法的生命周期更长 2.Java–内部类持有外部类导致内存泄露的原因和…...
【Linux】网络基础一
网络基础一 1.计算机网络背景1.1 网络发展1.2 认识 “协议” 2.网络协议初识2.1 协议分层2.2 OSI七层模型2.3 TCP/IP五层(或四层)模型 3. 网络传输基本流程3.1 网络传输流程图 4.数据包封装和分用5.网络中的地址管理 从今天开始我们将要从系统横跨到网络的学习了,因…...
Redis-2 Redis基础数据类型与基本使用
高级Redis应用进阶 一站式Redis解决方案-Redis-2 Redis基础数据类型与基本使用 源代码在GitHub - 629y/food-social-contact-parent: redis项目-美食社交APP 1. Redis基本数据类型 1.字符串(strings) set username zhangsan get username mset age 18 …...
python提取身份证中的生日和性别
1.代码 def sfzAnalysis(idNum):#检查身份证长度是否正确if len(idNum)!18:raise ValueError("身份证号码长度不正确,请输入一个18位的身份证号码。")#raise关键字在Python中有多种用途,主要涉及异常的抛出和错误处理#提取出生日期year idN…...
opencv 傅里叶变换(低通滤波 + 高通滤波)
文章目录 1、傅里叶变换2、通过numpy实现3、高通滤波器5、通过opencv实现傅里叶变换6、低通滤波器7、C实现傅里叶变换 1、傅里叶变换 时域分析:以时间作为参照物,世间万物都是随着时间变化而变化,并且不会停止 频域分析:认为世间万…...
Educational Codeforces Round 163 (Rated for Div. 2)(A,B,C,D,E)
比赛链接 好忙好忙好忙,慢慢补老比赛的题解了。 这场没啥算法,全是思维。有也是BFS,屎。 A. Special Characters 题意: 您将得到一个整数 n n n 。 您的任务是构建一串大写的拉丁字母。此字符串中必须正好有 n n n 个特殊字…...
索引常见面试题
面试中,MySQL 索引相关的问题基本都是一系列问题,都是先从索引的基本原理,再到索引的使用场景,比如: 索引底层使用了什么数据结构和算法?为什么 MySQL InnoDB 选择 Btree 作为索引的数据结构?什…...
【Unity】旋转的尽头是使用四元数让物体旋转
// 导入必要的命名空间 using System.Collections; using System.Collections.Generic; using UnityEngine;// 创建一个名为 RotateObj 的 MonoBehaviour 类,该类可以附加到 Unity 中的游戏对象上并控制其行为 public class RotateObj : MonoBehaviour {// Update 函…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
