Vue(四)—引入 Element-Plus Ui

因为我们开发使用的是 vue 的脚手架进行的, 前面已经使用过原生的方式编写 vue 语法了, 之后开始使用 vue 脚手架, 但是需要提前安装配置好 node

本章要点:

        创建 vue 项目 

        在 vue 项目里引用 ElementPlus

        通过 axios 请求配合 Element 完成完整的分页查询

一. node

1. 安装 node

傻瓜式安装 略 ……

2. 检查 node 和 npm

构建 vue 项目时需要作为服务器使用

 npm 是什么

       npm 是一个强大的管理包的工具, 它使开发人员能够轻松地安装、更新和管理项目依赖的包。

 npm 不需要单独安装. 在安装 node 的时候会连带这一起下载

二. 构建项目 

1. 黑窗口控制台

在保存 vue 文件的地址栏输入 cmd

 2. 全局安装

第一次配置不要终止 每输完一个等待下载 不要输入 y 终止

配置时如果不报红色的错就没问题

常见的错误有两个 

1. node 版本不对

        重新安装 node

2. 电脑用户没有权限(我就是这个问题) 如下方图二 图三

        使用管理员启动 cmd

cd/ 你需要保存的磁盘 复制文件夹地址

之后进行图一操作即可 

 3. 创建项目

错误

1. 提示 vue 不是内部或外部命令

首先 在这里输入 vue -V 查看 vue 版本 我发现我的版本是 2 … 几的 通过查找发现是版本太低了 需要更新 vue 版本

首先跟 全局安装 一样找到文件保存位置输入 cmd

先删除原有的 vue

 npm uninstall vue-cli -g 

然后重新安装 vue 版本

npm install -g @vue/cli

没报错请看这里

到这一步应该是没有报错 或者错误已经找到了

继续创建项目

vue create 项目名

注意项目名必须小写

是否要使用模版 我选择的是第三个 不使用模版

 后面按照步骤走就 ok 跟我现在一样都可以

我学习的是 vue 3 所以选择 3 版本 

 

这一步是说明是否要保存模版如果保存了需要像下面第二张图片一样起个名字  输入 y 是需要保存模版 输入 n 是不需要保存模版 选择哪一个都可以

 等待加载完成

 将这两个挨个输入一下

 后面会跳转到这个地方

 提示这个项目就创建完成了

三. 使用 vue 项目

 项目创建完毕下面我们需要使用编程工具打开项目 我这里使用的是 HBuilder X 

1. 引入项目

 

 2. 项目详情

项目创建完成了 我们需要知道项目里都是写什么东西

3. router 配置 

四. 引用 ElementPlus

想要使用 Element-Plus 需要先下载  连接如下:

安装 | Element Plus

$ npm install element-plus --save

方法 1  可以直接在 HBuilderX 里面的终端直接下载

错误示范 别把 & 符号复制上去了 从 npm 开始复制到后面

 

 

方法 2 找到文件所在位置 通过 cmd 窗口下载 

 在 main.js 里面引用下载好的 ElementPlus

五. 通过 ElementPlus 完成分页操作

需要:

        使用 axios 请求到 idea 的分页查询

        使用 ElementPlus 的表格 以及 分页

1. 创建 vue 页面

2. 给创建的 vue 页面配一个访问路径

3. 引入表格

 

 

启动之后可以看到表格是有 ui 效果的 说明我们 Element 引用的没有问题 

 4. 查询到内容

首先启动准备好的 Java 项目 详细看之前我写过的 SpringBoot 内容

查询到数据 将数据填充到表格

5. 引入分页插件进行分页操作

 分页插件跟表格是分开的 去 ElementPlus 中找一个自己喜欢的即可

效果如下: