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

敏捷开发——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的分库分表后拓展出来的关于分布式事务的讨论&#xf…...

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 函…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

centos 7 部署awstats 网站访问检测

一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...