Vue中引入Element组件、路由router、Nginx打包部署

目录

 1、Element-ui(饿了么ui)

演示:

怎么打开NPM脚本?

Vue路由router

Nginx打包部署Vue-Cli项目


 1、Element-ui(饿了么ui)


element-ui(饿了么ui)是一个非常好用且美观的组件库(插件库),主要用于网站快速成型,由国产团队饿了么团队开发的,所有又称饿了么ui。

官网:elementui官网文档

现在我们通过链接来到Element官网,找到右上角的组件

点击安装,这里提供了两种安装方式,1:npm安装 2:CDN形式引入css和js文件。《个人建议使用第一种》

npm安装命令:

npm i element-ui -S

安装完成后,然后在Vue项目中文件入口-main.js中引入ElementUI组件库

在main.js中加入以下代码:

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

引入成功之后,可以在node_modules目录下找到E打头的element-ui文件,证明你引入成功了。

现在我们ElementUI组件库就引入到我们的Vue项目了,现在可以去官网复制粘贴需求的代码。

点击此链接来到ElementUI组件库的官网!!!

演示:

下面来演示如何在Vue中添加我们需要的按钮代码:

现在把我们需要的按钮代码拿到我们新创建的.vue视图:

如果我们需要渲染页面,现在就需要在App.vue根目录导入我们所创建的视图:

注意:

  1. 必须要在<template>标签加上自定义标签,标签名和你的命名相同。
  2. 在<script>标签中需要导入我们所创建的视图,在components属性中导入组件。

现在我们输入命令启动我们的项目。

在vscode中新创建一个终端,输入以下命令:

npm run serve

运行之后的效果如图所示:

注意:

这里我的端口号是8000,VueCli默认端口号是8080,如果我们需要修改自己的端口号,需要在配置文件-vue.config.js添加一下配置代码:

快捷键:Ctrl+鼠标点击我们访问的地址,就能看到渲染主页面的效果了:

效果如下图:

现在再来演示一个分页组件:

现在来解释一下layout布局中的可选属性:可以从官网下滑看到一些属性都给出了相应的解释。

layout 属性的值是一个由逗号分隔的字符串,指定了分页组件中需要显示哪些部分。每个部分代表分页组件的一个功能:

  • sizes: 允许用户选择每页显示的条目数量。
  • prev: 上一页按钮。
  • pager: 页码列表,显示当前页和周围的一些页码。
  • next: 下一页按钮。
  • jumper: 跳转到指定页码的输入框。
  • ->: 表示连续的页码,通常与 pager 一起使用。
  • total: 显示总条目数。
  • slot: 一个自定义的插槽,允许你在分页组件中插入自定义内容。

这里重点讲一下solt属性:

slot 属性允许你插入自定义的分页内容,比如自定义的页码显示逻辑、额外的按钮或者其他任何你想要展示的 HTML 元素。

Element UI 的分页组件提供了一个插槽 slot="prepend" 用于在分页组件前插入内容,以及 slot="append" 用于在分页组件后插入内容。

<el-paginationlayout="sizes,prev,pager,next,jumper,->,total,slot":total="1000"><template slot="prepend"><!-- 在这里插入自定义内容,比如自定义的按钮或文本 --></template><template slot="append"><!-- 在这里插入自定义内容 --></template>
</el-pagination>

创建一个.vue文件复制我们的代码,然后就是在App.vue导入我们所创建的分页视图:

运行之后的效果:

拓展:

怎么打开NPM脚本?

我们可以在vscode中打开NPM脚本直接运行项目,不需要每次运行都输入npm run serve命令,以便于给我们提供便捷快速运行的方式。

打开vscode中的设置,点击扩展,找到Npm,勾选上显示选项。

如果vscode左下角还是没有显示NPM脚本,可以尝试快捷键Ctrl+Q,选择Npm。

Vue路由router

介绍:Vue Router是Vue的官方路由。

安装:npm install vue-router@3.5.1
组成:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件。
  • <router-link>:请求链接组件,浏览器会解析成<a>。
  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件。

找到Vue项目中的router,打开index.js文件,这里提供了两种导入方式。


这里建议使用第二种方式直接导入,现在对routes参数进行相应的解释:

  • path:是我们访问的路径
  • name:路由名称
  • component:导入的组件

注意:如果想访问about的vue组件,将上面的路径改写成/about就行。

在哪里需要跳转就加上<router-link to="">标签☺

还需要在App.vue页面加上<router-view></router-view>标签实现页面渲染。

现在我们来看看运行效果:

Nginx打包部署Vue-Cli项目

Nginx (发音为 "engine-x") 是一个高性能的 HTTP 服务器、反向代理、负载均衡器以及TCP/UDP代理服务器。

以下是 Nginx 的一些主要特点:

  • 高性能:Nginx 以其轻量级和高性能而闻名,能够处理大量的并发连接和请求。
  • 稳定性:Nginx 以其稳定性著称,能够长时间运行而无需重启。
  • 配置简单:Nginx 的配置文件结构清晰,易于理解和修改。
  • 灵活性:Nginx 不仅可以作为静态网页服务器,还可以作为代理服务器,支持 HTTP、HTTPS、SMTP、POP3 和 IMAP 协议。
  • 反向代理:Nginx 常用于实现反向代理功能,将客户端的请求转发到后端服务器上,并获取后端服务器的响应后返回给客户端。
  • 负载均衡:Nginx 可以作为负载均衡器,将请求分发到多个后端服务器,提高网站的性能和可靠性。
  • 安全性:Nginx 提供了多种安全特性,如防止DDoS攻击和限制用户访问。
  • 模块化:Nginx 拥有丰富的模块系统,可以通过安装额外的模块来扩展其功能。
  • 跨平台:Nginx 可以在多种操作系统上运行,包括 Unix-like 系统和 Windows。

Nginx 广泛用于网站和网络应用的部署,是当前互联网上使用最广泛的服务器之一。它常与 PHP、Python、Perl 等语言结合使用,通过 FastCGI 或 uWSGI 协议提供动态网页服务。

安装:点击此链接进行下载,下载完成之后来到download页面,选择稳定版本。

安装之后解压到我们电脑本地:

然后我们在终端输入命令npm run build,进行项目打包,打包完成之后可以看到项目下多了一个dist文件夹,里面存放了一些静态文件。

 现在执行以下重要两步:

●部署:将打包好的dist目录下的文件,复制到nginx安装目录的html目录下。
●启动:双击Nginx.exe文件即可,Nginx服务器默认占用80端口号。

注意:双击Nginx.exe没有反应,并且在进程中没有看到它运行,说明它默认的80端口号已经被占用了,现在我们可以输入命令查找80端口号进程。

netstat -ano | findstr :端口号

打开我们的cmd窗口,输入命令开始查找:

打开我们的任务管理器,点击详细信息,可以发现我们80端口号已经被System占了,所以现在只能更改我们默认的端口号。

打开Nginx安装路径下的conf/配置文件nginx.conf

打开之后,在配置文件中进行更改:

更改端口号完成之后,双击Nginx.exe文件即可,完成这步操作之后,我们可以在任务管理器中看到nginx.exe正在运行。

完成以上操作,我们利用Nginx部署Vue-Cli项目就完成啦!

现在我们可以直接在电脑本地访问链接http://localhost:90!!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设置多用户远程登录windows server2016服务器

1、远程登录windows server 2016 运行—>mstsc—>远程IP地址—>用户和密码 2、远程windows服务器设置多用户策略 运行—>gpedit.msc->计算机配置—管理模板—windows组件—远程桌面服务—远程桌面会话主机----连接,如下图所示: 1、《限制连接的数量》设置为…

2024-AIDD-人工智能药物设计-基于深度学习的胶质母细胞瘤靶点蛋白的识别与药物设计

UniProt搜索胶质母细胞瘤相关蛋白&#xff1a;从UniProt数据库查找胶质母细胞瘤相关的蛋白质数据是一个很好的开始&#xff0c;这可以帮助你识别与疾病相关的关键蛋白。 疾病与中药交集分析&#xff1a;研究中药&#xff08;如益气解毒方&#xff09;与胶质母细胞瘤的关系&…

Mybatis高效批量插入实战:五种策略全面解析

在现代应用开发中&#xff0c;数据处理常常涉及大量数据的插入操作&#xff0c;特别是在数据迁移、日志记录、统计分析等场景中。Mybatis作为Java领域广泛使用的持久层框架&#xff0c;其批量插入功能对于提升数据插入效率至关重要。本文将深入探讨Mybatis实现批量插入的五种策…

网络安全基础

目录 概述 1. 需求 2. 密码学 3. 保密 4. 数字签名 5. 身份认证 6. 对称密钥分配及管理 7. 公钥认证及PKI 8. 网络安全协议标准 结语 概述 在当今数字化时代&#xff0c;网络安全是任何组织和个人都必须重视的重要问题。从个人隐私到商业机密&#xff0c;网络安全的基…

DenseCLIP论文讲解

文章目录 简介方法总体框架 &#xff08;Language-Guided Dense Prediction&#xff09;上下文感知提示 &#xff08;Context-Aware Prompting&#xff09;应用实例 论文&#xff1a;DenseCLIP: Language-Guided Dense Prediction with Context-Aware Prompting 代码&#xff1…

【Linux-I.MX6ULL裸机学习】中断向量表

代码来自于正点原子阿尔法Linux开发板光盘 比如在中断向量表中规定了&#xff1a;在某个地址0x80000A对应着某个中断服务函数&#xff0c;那么在产生这个中断时&#xff0c;就会从0x80000A这个地址去读取中断服务函数&#xff0c;并执行。 如果想改变这个地址&#xff0c;也就是…

DOTCPP题目 2782: 整数大小比较

一、题目 题目描述 输入两个整数&#xff0c;比较它们的大小。 输入格式 一行&#xff0c;包含两个整数x和y&#xff0c;中间用单个空格隔开。 0 < x < 2^32, -2^31 < y < 2^31。 输出格式 一个字符。 若x > y&#xff0c;输出 > &#xff1b; 若x y&#x…

27、Qt自定义标题栏

一、说明 QtWidget及其子类有默认的标题栏&#xff0c;但是这个标题栏不能美化&#xff0c;有时候满足不了我们的使用需求&#xff0c;所以进行自定义标题栏 二、下载图标 在下面的链接中下载两种颜色的最大化、向下还原、最大化和关闭八个图片&#xff0c;并找一张当做图标…

【ITK配准】第二十一期 Demons变形配准

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享ITK配准中Demons变形配准,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 目录 前言 Demons…

Spring 框架中用到的设计模式

概述 1.工厂模式:BeanFactory 2.代理模式 AOP动态代理 3.单例模式:spring中bean都是单例模式&#xff0c;bean默认都是单例的 4.模板方法:postProcessorBeanFactory, onRefresh&#xff0c;initpropertyValue 5.观察者模式:listener,event,multicast 6.适配器模式:Adapter 7.装…

shell基础知识

一.Shell概述 Shell是一个命令行解释器,它接收用户命令,然后调用操作系统内核 二.Shell解析器 cat /etc/shells echo $SHELL 三.Shell脚本入门 #!/bin/bash bash helloworld.sh chmod 777 helloworld.sh 四.Shell中的变量 echo $HOME | $PWD | $SHELL | $USER set 显示当前Shel…

使用GitLab自带的CI/CD功能在K8S集群里部署项目(四)

前置内容&#xff1a; 通过Docker Compose部署GitLab和GitLab Runner&#xff08;一&#xff09; 使用GitLab自带的CI/CD功能在本地部署项目&#xff08;二&#xff09; 使用GitLab自带的CI/CD功能在远程服务器部署项目&#xff08;三&#xff09; 一、K8S集群信息 节点名称…

基于springboot+vue+Mysql的体质测试数据分析及可视化设计

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

JAVA反射示例

public static void main(String[] args) throws Exception {Class pClass Class.forName("jdj.Person");//遍历整个控制器Constructor[] constructorspClass.getDeclaredConstructors();for(Constructor con:constructors) {System.out.println(con);}//通过控制器…

【CCF-CSP】202403-3 化学方程式配平

输入格式&#xff1a; 从标准输入读入数据。 输入的第一行包含一个正整数 n&#xff0c;表示需要判断的化学方程式的个数。 接下来的 n 行&#xff0c;每行描述了一个需要被配平的化学方程式。包含空格分隔的一个正整数和全部涉及物质的化学式。其中&#xff0c;正整数 m 表…

Ubuntu 安装 samba 实现文件共享

1. samba的安装: sudo apt-get install samba sudo apt-get install smbfs2. 创建共享目录 mkdir /home/share sudo chmod -R 777 /home/share3. 创建Samba配置文件: 3.1 保存现有的配置文件 sudo cp /etc/samba/smb.conf /etc/samba/smb.conf.bak3.2 打开现有的文件 sudo…

Docker快速启动清单

以下容器均使用 Docker version 24.0.2 版本测试使用&#xff0c;这里需要注意一下&#xff0c;高版本的Docker不支持镜像V1版本&#xff0c;不知道怎么操作才可以让它支持&#xff0c;所以推荐使用低版本 如果觉得不直观&#xff0c;或者觉得有点乱&#xff0c;可以访问以下网…

第十二章 元数据管理练习

单选题 (每题1分,共23道题) 1、 [单选] 元数据的来源有哪些? A:参考数据库、BI工具 B:数据字典、数据集成工具 C:建模工具和事件消息工具 D:以上都是 正确答案:D 你的答案:D 解析:327~330页,一共15个来源,所以选D,考核知识点,元数据的基本概念,元数据来源相关…

Window如何运行sh文件以及wget指令

Git下载 官网链接如下&#xff1a;https://gitforwindows.org/ 安装就保持一路无脑安装就行&#xff0c;不需要改变安装过程中的任何一个选项。 配置Git 切刀桌面&#xff0c;随便右击屏幕空白处&#xff0c;点open Git Bash here 把这行复制过去&#xff0c;回车&#xff1…

【用文本生成歌声】Learn2Sing 2.0——歌声转换算法及梅尔频谱详解

一. 频谱图与梅尔谱图的介绍 频谱图&#xff1a;频谱图可以理解为一堆垂直堆叠在一起的快速傅里叶变换结果。 1.1 信号 在进入频谱图模块之前&#xff0c;首先我们需要了解信号是什么。 信号就是某一特定量随时间变化&#xff0c;对于音频来说&#xff0c;这个特定的变化量就…