研发效能DevOps: Vite 使用 Element Plus

news2024/12/23 4:32:50

目录

一、实验

1.环境

2.初始化前端项目

3.安装 vue-route

4.安装 pinia

5.安装 axios

6.安装 Element Plus

7.gitee创建工程

8. 配置路由映射

9.Vite 使用 Element Plus

二、问题

1.README.md 文档推送到gitee未自动换行

2.访问login页面显示空白

3.表单输入账户与密码，按钮依然为禁用状态

一、实验

1.环境

（1）主机

表1 主机

系统

软件版本备注
Windows11VS Code1.96.2
Node.jsv18.20.4(LTS)

运行（输入cmd）

bb3a3a38004c40f2bbe67919cce22e05.png

查看VS Code版本

Code --version

查看node版本

node -v

87de6fb85c2d465592c1d9bf92f6903d.png

查看npm版本

npm -v

e2bc65daa7634b05ab83d20f2e7f53ca.png

2.初始化前端项目

（1）安装vite

cnpm create vite@latest

输入y，然后选择vue

接下来选择JavaScript

（2）安装依赖

切换目录

cd vite-axios

这里切换cnpm安装依赖

cnpm install

(3) 运行

npm run dev

弹出界面：

可以访问到Vite + Vue

http://localhost:5173/

（4）退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

3.安装 vue-route

(1) 查阅

https://router.vuejs.org/zh/installation.html

(2) 安装vue-router

使用cnpm安装

cnpm install vue-router@4

(3) main.js集成路由

导入router

import router from './router'

注册路由

const app = createApp(App)
app.use(router)
app.mount('#app')

修改前：

修改后：

（4）创建路由配置目录router

（5） router下创建index.js （实现组件与路由映射）

（6）修改index.js

导入创建路由的方法

import { createWebHistory, createRouter } from 'vue-router'

定义路由映射

const listRoutes = {

}

const routes = [
    listRoutes,
]

创建路由实例

const router = createRouter({
    history: createWebHistory(),
    routes,
})

导出默认路由

export default router 

 (7) 运行

npm run dev

弹出界面：

可以访问到Vite + Vue

http://localhost:5173/

（8）退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

4.安装 pinia

(1) 查阅

https://pinia.vuejs.org/zh/getting-started.html

 (2) 安装pinia

使用cnpm安装

cnpm install pinia

(3) main.js集成pinia

导入创建pinia的方法

import { createPinia } from 'pinia'

注册pinia

const pinia = createPinia()
app.use(router).use(pinia)
app.mount('#app')

修改前：

修改后：

（5）创建全局状态(容器)目录store

（6）store下创建index.js

（7）修改index.js

导入定义Store

import { defineStore } from 'pinia'

state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)

export const useStoreDemo = defineStore('storeDemo', {
    state: () => {
       return {
        msg: "This is Pinia"
        }   
    },
    getters: {},
    actions: {
       changeStoreDemo(value) {
        this.msg = value
        }
    }
})

5.安装 axios

(1) 查阅

https://www.axios-http.cn/docs/intro

(2)安装axios

使用cnpm安装

cnpm install axios

(3) 创建封装目录api

（4）api下创建index.js

(5)修改 index.js

import axios from 'axios'
const request = (url = '', data = {}, method = "get", timeout = 5000) => {
    return new Promise((resolve, reject)=>{
        const methodLower = method.toLowerCase() 
        if (methodLower === 'get') {
            axios({
                method: methodLower,
                params: data,
                timeout: timeout,
                url: url,
            }).then((response)=>{
                resolve(response)
            }).catch((error)=>{
                reject(error)
            })
        } else if (methodLower === "post") {
            axios({
                method: methodLower,
                data: data,
                timeout: timeout,
                url: url,
            }).then((response)=>{
                resolve(response)
            }).catch((error)=>{
                reject(error)
            })
        }
    })
}

export default request

6.安装 Element Plus

(1) 查阅

https://element-plus.org/zh-CN/guide/installation.html

(2)安装Element Plus

使用cnpm安装

(--save 参数 在装的时候会把包的信息写入package.json )

cnpm install element-plus --save

(3) 查看package.json 

（4）查阅

https://element-plus.org/zh-CN/guide/quickstart.html

（5）main.js集成Element Plus

……
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
……
app.use(router).use(pinia).use(ElementPlus)

修改前：

修改后：

  (6) 运行

npm run dev

弹出界面：

可以访问到Vite + Vue

http://localhost:5173/

F12 查看控制台 （目前暂未配置路由）

（7）退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

7.gitee创建工程

（1）新建仓库

https://gitee.com/

（2）创建

（3）创建 git 仓库

git init

git add .

git add -A

git commit -m "项目初始化配置"

XXXXXXXX/vite-scaffold为创建的gitee仓库

git remote add origin git@gitee.com:XXXXXXXX/vite-scaffold.git

git push -u origin "master"

(4) gitee查看

（5）修改README.md

# scaffold项目初始化配置

cnpm create vite@latest
cnpm install
cnpm install vue-router@4
cnpm install pinia
cnpm install axios
cnpm install element-plus --save

（6）git查看状态

git status

(7) 提交并推送

git commit -am "修改文档"

git push -u origin "master"

（8）gitee查看

8. 配置路由映射

（1）创建页面组件目录view

（2）view下创建多个组件

Login.vue

然后把compoents下的HelloWorld.vue 内容，复制到Login.vue

（3）修改router下的index.js

通过懒加载形式把Login.vue导入

const Login = () => import('../view/Login.vue')

添加路由映射关系

……
const routes = [
    listRoutes,
    {
        path: "/login",
        component: Login,
    }
]
^

（4）路由输出到App.vue

修改App.vue

……
<router-view></router-view>
……

   (5) 运行

npm run dev

弹出界面：

可以访问到Vite + Vue

http://localhost:5173/login

（6）退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

9.Vite 使用 Element Plus

（1）查阅

https://element-plus.org/zh-CN/component/card.html

（2）修改Login.vue

添加卡片

<template>
  <el-card class="box-card">
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
  </el-card>
</template>

样式

<style scoped>
  .text {
    font-size: 14px;
  } 
  .item {
    padding: 18px 0;
  }
  .box-card {
    width: 480px;
  }
</style>

（3） 访问到Vite + Vue

http://localhost:5173/login

（4）git查看状态

git status

(5) 提交

git add -A

git commit -am "首页路由配置"

（6）添加标题元素

修改Login.vue

……
<h2>DevOps系统</h2>
……

（7） 访问到Vite + Vue

http://localhost:5173/login

（8）查阅表单

https://element-plus.org/zh-CN/component/card.html

（9）添加表单

修改Login.vue

<el-form
      :model="loginInfo"
      status-icon
      :rules="rules"
    >
      <el-form-item prop="username">
        <el-input v-model.number="loginInfo.username" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginInfo.password" type="password" autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
      </el-form-item>
  </el-form>

（10）访问到Vite + Vue

http://localhost:5173/login

（11）查阅输入框与图标

输入框

https://element-plus.org/zh-CN/component/input.html

图标

https://element-plus.org/zh-CN/component/icon.html

（12）安装图标

cnpm install @element-plus/icons-vue --save

（13）找到username图标

https://element-plus.org/zh-CN/component/icon.html

点击图标

显示已复制

获取到图标信息：

<el-icon><User /></el-icon>

(14)找到password图标

 点击图标

显示已复制

获取到图标信息：

<el-icon><Lock /></el-icon>

(15) 添加图标，并将图标映射到输入框中

修改Login.vue

……
import { User,Lock } from '@element-plus/icons-vue';
……
:prefix-icon="User"
……
:prefix-icon="Lock"
……

 （16）访问到Vite + Vue

http://localhost:5173/login

 （17）git提交

git commit -am "输入框与按钮配置"

（18）查阅输入框设置固定宽度

https://element-plus.org/zh-CN/component/input.html

（19）添加clearable 图标

修改Login.vue

clearable

 （20）访问到Vite + Vue

http://localhost:5173/login

（21）查阅切换密码图标

（22）添加切换密码图标

修改Login.vue

show-password

 （23）访问到Vite + Vue

http://localhost:5173/login

（24）查阅输入框占位文本

（25）添加输入框占位文本

修改Login.vue

……
placeholder="请输入账户名"
……
placeholder="请输入密码"
……

 （26）访问到Vite + Vue

http://localhost:5173/login

（27）查阅表单校验

https://element-plus.org/zh-CN/component/form.html

（28）表单添加校验

修改Login.vue

import { reactive,ref } from 'vue';
……
const loginRef = ref()
const rules = reactive({
    username: [
      { required: true, message: '请输入账户名', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})
……
ref="loginRef"
:rules="rules"
……

 （29）访问到Vite + Vue

http://localhost:5173/login

（30）查阅按钮禁用状态

https://element-plus.org/zh-CN/component/button.html

（31）登录按钮添加禁用状态

import { watch } from 'vue';
……
let loginButtonDisabled = ref(true)
watch([() => loginInfo.username,() => loginInfo.password],() =>{
  loginRef.value.validate((valid)=>{
      if(valid){
        loginButtonDisabled = false
      } else {
        loginButtonDisabled = true
      }
    }
  )
})
……
:disbaled="loginButtonDisabled"
……

（32）访问到Vite + Vue

http://localhost:5173/login

未输入账户或密码。登录按钮为禁用状态 （浅蓝色）

未输入密码。登录按钮为禁用状态 （浅蓝色）

输入账户与密码。登录按钮为启用状态 （深蓝色）

（33）git提交

git commit -am "输入框与按钮配置"

二、问题

1.README.md 文档推送到gitee未自动换行

（1）问题

README.md写好内容时，发现它缩到一起了，不是想要的格式

（2）原因

换行末尾，未打上空格。

（3）方法

   直接在要换行的语句最后打上2个空格

git push后，成功换行

2.访问login页面显示空白

（1）问题

访问login页面空白

（2）原因

渲染配置错误

(3) 方法

修改前

修改后：

成功：

3.表单输入账户与密码，按钮依然为禁用状态

（1）问题

表单输入账户与密码，按钮依然为禁用状态 （浅蓝色）

（2）原因分析

watch监听状态的值判断需要配置正确

（3）方法

修改watch监听里if判断

修改前：

修改后：

成功：

图标显示（深蓝色）

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

openbmc hwmon与sensor监控

openbmc hwmon与sensor监控

1.说明 参考文档: https://github.com/openbmc/entity-manager/blob/master/docs/entity_manager_dbus_api.mdhttps://github.com/openbmc/entity-manager/blob/master/docs/my_first_sensors.md 1.1 简单介绍 注意: 本节是快速浏览整个sensor框架&#xff0c;了解大致open…
阅读更多...
thinkphp框架diygw-ui-php进销存出库记录操作

thinkphp框架diygw-ui-php进销存出库记录操作

将进销存的出库明细记录存储到数据库中&#xff0c;thinkphp框架diygw-ui-php后台通常涉及以下几个步骤&#xff1a; 数据库表定义 实现我们定义了三张表、一个产品表、出库订单表、出库订单产品明细表 生成API 进入DIY可视化API代码生成器&#xff0c;我们生成这三张表结应…
阅读更多...
vertx idea快速使用

vertx idea快速使用

目录 1.官网下载项目 2.修改代码 2.1拷贝代码方式 为了能够快速使用&#xff0c;我另外创建一个新的maven项目&#xff0c;将下载项目的src文件和pom文件拷贝到新建的maven项目。 2.2删除.mvn方式 3.更新配置 4.配置application 5.idea启动项目 1.官网下载项目 从vert…
阅读更多...
ComE（Community Embedding） -- 基于嵌入的社区检测优化算法

ComE（Community Embedding） -- 基于嵌入的社区检测优化算法

ComE&#xff08;Community Embedding&#xff09;是一种基于嵌入的社区检测优化算法。 它结合了节点嵌入技术与社区划分的目标&#xff0c;能够有效识别网络中的社区结构&#xff0c;并在社区划分过程中捕捉复杂的节点相互作用信息。 算法背景 传统的社区检测方法&#xff0c;…
阅读更多...
CSS|14 z-index

CSS|14 z-index

z-index z-index表示谁压盖着谁&#xff0c;数值大的会压盖住数值小的。只有定位的元素才有z-index值&#xff0c;只有设置了固定定位、相对定位、绝对定位了的元素&#xff0c;才会拥有z-indexz-index的值是没有单位的&#xff0c;值是一个正整数&#xff0c;默认的z-index值…
阅读更多...
重撸设计模式--代理模式

重撸设计模式--代理模式

文章目录 定义UML图代理模式主要有以下几种常见类型&#xff1a;代理模式涉及的主要角色有&#xff1a;C 代码示例 定义 代理模式&#xff08;Proxy Pattern&#xff09;属于结构型设计模式&#xff0c;它为其他对象提供一种代理以控制对这个对象的访问。 通过引入代理对象&am…
阅读更多...
vue中验证码的实现方式

vue中验证码的实现方式

在写登录页的时候有的系统会让你也进行一下验证码绘制&#xff0c;那么验证码如何实现的呢&#xff1f;我在写登录页的时候通过将登录框&#xff0c;验证码分开页面来写&#xff0c;最后将它们变成标签来导入到我的样式页面中&#xff0c;这样写不仅方便&#xff0c;更容易修改…
阅读更多...
Spring（三）-SpringWeb-概述、特点、搭建、运行流程、组件、接受请求、获取请求数据、特殊处理、拦截器

Spring（三）-SpringWeb-概述、特点、搭建、运行流程、组件、接受请求、获取请求数据、特殊处理、拦截器

文章目录 一、SpringWeb概述 二、SpringWeb特点 三、搭建SpringWeb&#xff08;在web项目中&#xff09; 1、导包 2、在web.xml文件中配置统一拦截分发器 DispatcherServlet 3、开启 SpringWEB 注解 4、处理器搭建 四、SpringWeb运行流程 五、SpringWeb组件 1、前端控…
阅读更多...
构建MacOS应用小白教程（打包 签名 公证 上架）

构建MacOS应用小白教程（打包 签名 公证 上架）

打包 在package.json中&#xff0c;dependencies会被打进 Electron 应用的包里&#xff0c;而devDependencies则不会&#xff0c;所以必要的依赖需要放到dependencies中。files中定义自己需要被打进 Electron 包里的文件。以下是一个完整的 mac electron-builder的配置文件。 …
阅读更多...
2.4 网络概念（分层、TCP）

2.4 网络概念（分层、TCP）

网络层与传输层概述 网络层&#xff1a; 抽象概念&#xff1a;网络层是基于 IP 的抽象概念&#xff0c;与数据链路层用 MAC 地址标记设备不同。MAC 地址是一种具体化的概念&#xff0c;绑定于所在的物理网络&#xff0c;而 IP 地址可以是固定的&#xff0c;也可以通过路由动态…
阅读更多...
【JetPack】Room数据库笔记

【JetPack】Room数据库笔记

Room数据库笔记 ORM框架&#xff1a;对齐数据库数据结构与面向对象数据结构之间的关系&#xff0c;使开发编程只考虑面向对象不需要考虑数据库的结构 Entity : 数据实体&#xff0c;对应数据库中的表 <完成面向对象与数据库表结构的映射> 注解&#xff1a; 类添加注解…
阅读更多...
基于前端技术UniApp和后端技术Node.js的电影购票系统

基于前端技术UniApp和后端技术Node.js的电影购票系统

文章目录 摘要Abstruct第一章 绪论1.1 研究背景与意义1.2 国内外研究现状 第二章 需求分析2.1 功能需求分析2.2 非功能性需求分析 第二章系统设计3.1 系统架构设计3.1.1 总体架构3.1.2 技术选型 3.2 功能架构 第四章 系统实现4.1 用户端系统实现4.1.1 用户认证模块实现4.1.2 电…
阅读更多...
大模型微调---Lora微调实战

大模型微调---Lora微调实战

目录 一、前言二、LoRA实战2.1、下载模型到本地2.2、加载模型与数据集2.3、处理数据2.4、LoRA微调2.5、训练参数配置2.6、开始训练 三、模型评估四、完整训练代码 一、前言 LoRA是一种参数高效的微调技术&#xff0c;通过低秩转换对大型语言模型进行适应性更新&#xff0c;减少…
阅读更多...
centos7下docker 容器实现redis主从同步

centos7下docker 容器实现redis主从同步

1.下载redis 镜像 docker pull bitnami/redis2. 文件夹授权 此文件夹是 你自己映射到宿主机上的挂载目录 chmod 777 /app/rd13.创建docker网络 docker network create mynet4.运行docker 镜像 安装redis的master -e 是设置环境变量值 docker run -d -p 6379:6379 \ -v /a…
阅读更多...
SLAAC如何工作？

SLAAC如何工作？

SLAAC如何工作&#xff1f; IPv6无状态地址自动配置(SLAAC)-常见问题 - 苍然满关中 - 博客园 https://support.huawei.com/enterprise/zh/doc/EDOC1100323788?sectionj00shttps://www.zhihu.com/question/6691553243/answer/57023796400 主机在启动或接口UP后&#xff0c;发…
阅读更多...
2024.12.21辩论赛感受

2024.12.21辩论赛感受

背景 今天辩论赛的双方论点是&#xff1a; 正方&#xff1a;寒假留在研发中心的收获大 反方&#xff1a;寒假去做其他事情的收获 辩论赛&#xff0c;为了锻炼自己&#xff0c;选择了不想选择以及相对不好辩论的反方。出现的状况有一下几点&#xff1a; 1.发现自己脑子完全跟不…
阅读更多...
【从零开始入门unity游戏开发之——C#篇21】C#面向对象的封装——`this`扩展方法、运算符重载、内部类、`partial` 定义分部类

【从零开始入门unity游戏开发之——C#篇21】C#面向对象的封装——`this`扩展方法、运算符重载、内部类、`partial` 定义分部类

文章目录 一、this扩展方法1、扩展方法的基本语法2、使用扩展方法3、扩展方法的注意事项5、扩展方法的限制6、总结 二、运算符重载1、C# 运算符重载2、运算符重载的基本语法3. 示例&#xff1a;重载加法运算符 ()4、使用重载的运算符5、支持重载的运算符6、不能重载的运算符7、…
阅读更多...
C语言：文件IO

C语言：文件IO

C语言&#xff1a;文件IO 文件操作 概述 什么是文件 文件是保存在外存储器&#xff08;一般代指磁盘&#xff0c;U盘&#xff0c;移动硬盘等&#xff09;的数据的集合 文件操作体现在哪几个方面 文件内容的读取文件内容的写入 数据的读取和写入可被视为针对文件进行输入&…
阅读更多...
时间序列异常值处理方法

时间序列异常值处理方法

文章目录 一、删除法二、替换法三、插值法四、滑动窗口五、基于模型的替换 时间序列相关参考文章&#xff1a; 时间序列预测算法—ARIMA 时间序列预测算法—Prophet 时间序列分类任务—tsfresh python时间序列处理 有季节效应的非平稳序列分析 时间序列异常值检测方法 时间序列…
阅读更多...
【报错】node:internal/modules/cjs/loader:936

【报错】node:internal/modules/cjs/loader:936

报错问题&#xff1a; 当执行npm run dev后&#xff0c;出现下面错误 这个错误一般是由于Node.js无法找到所需的模块而引起的&#xff0c;解决此问题的一种方法就是重新安装所需的模块。 解决办法&#xff1a; 删除npm install 所下载在项目里的node_modules文件执行操作&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023