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

news2024/10/6 8:33:22

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根目录导入我们所创建的视图：

注意：

必须要在<template>标签加上自定义标签，标签名和你的命名相同。
在<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-pagination
  layout="sizes,prev,pager,next,jumper,->,total,slot"
  :total="1000">
  <template slot="prepend">
    <!-- 在这里插入自定义内容，比如自定义的按钮或文本 -->
  </template>
  <template slot="append">
    <!-- 在这里插入自定义内容 -->
  </template>
</el-pagination>

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