研发效能DevOps: Vite 使用 Element Plus

embedded/2024/12/25 10:38:31/

目录

一、实验

1.环境

2.初始化前端项目

vue-router-toc" style="margin-left:40px;">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

vue-router">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 -Agit 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.ppmy.cn/embedded/148592.html

相关文章

为什么通过调制可以扩宽信号的带宽,可以提高系统的抗干扰能力?

调制技术在通信系统中的应用不仅能够有效传输信息&#xff0c;还可以扩宽信号的带宽并提高系统的抗干扰能力。这些特性使得调制成为现代通信系统不可或缺的一部分。目前市场的信号源基本都具有多种类型的调制功能&#xff0c;例如RIGOL的DG922Pro支持AM、FM、PM、ASK/FSK/PSK、…

C++ 模板是为了解决啥问题

模板是 C 的一种强大特性&#xff0c;它主要解决了 代码复用 和 类型安全 问题。模板允许在编译时生成具有不同类型的代码&#xff0c;从而使得代码可以适用于多种类型&#xff0c;而不需要重复编写类似的代码。 具体来说&#xff0c;模板解决了以下几个问题&#xff1a; 代码…

Django 模板分割及多语言支持案例【需求文档】-->【实现方案】

Django 模板分割及多语言支持案例 这个案例旨在提供一个清晰的示范&#xff0c;展示如何将复杂的页面分解为多个可复用的模板组件&#xff0c;使代码更加模块化和易于管理。希望这篇案例文章对你有所帮助。 概述 在 Django 项目开发中&#xff0c;使用模板分割和多语言支持能…

【可视化开源性能压测工具】小巧而强大的oha

oha是一款小巧而强大的测试工具&#xff0c;使用Rust语言编写&#xff0c;依托tokio和ratatui库&#xff0c;实现了高效且美观的测试界面。它可用于向Web应用发送负载&#xff0c;并实时显示带有TUI&#xff08;Text User Interface&#xff09;动画的测试结果。这款工具受到了…

【C++学习篇】AVL树

目录 1.AVL树的概念 2.AVL树的实现 2.1AVL树的结构 2.2AVL树的插入 2.2.1 AVL树插⼊⼀个值的⼤概过程 2.2.2平衡因子的更新 2.2.3 插⼊结点及更新平衡因⼦的代码实现 ​编辑 2.3旋转 2.3.1旋转的原则 2.3.2 右单旋 2.3.3左右双旋 2.3.4 右左双旋 1.AVL树的概念 1…

Java课程设计:基于Javaweb的超市管理系统

一、项目介绍 超市账单管理系统主要用于对超市的交易账单进行管理&#xff0c;如账单录入、账单修改、账单 删除&#xff0c;以及和超市商品相关的供应商、用户的管理等。所谓账单&#xff0c;就是超市与供应商进 行交易的凭据。超市采购部的职员、超市的部门经理是该系统的目…

flutter轮播图控件根据图片高度动态调整图高度

1.图片链接资源需要带有宽高信息 例如&#xff1a;https://zmkx.oss-cn-hangzhou.aliyuncs.com/oss/folder/atui2024-12-231734938007236a30cb975297842d0b3d2b82e4ec7f72b7unhmlcaj4el.jpg?Size1080x2388 在链接中拼接?Size1080x2388携带。 2.获取到数据后切割出宽高 List…

AI 在医疗行业的应用

AI 在医疗行业的应用正在迅速发展&#xff0c;它不仅提升了医疗服务的效率和准确性&#xff0c;还推动了医学研究和患者管理的创新。以下是 AI 在医疗行业的几个主要应用领域&#xff1a; 1. 疾病诊断与早期检测 医学影像分析&#xff1a;AI&#xff0c;尤其是深度学习&#…