01动力云客之环境准备+前端Vite搭建VUE项目入门+引入Element PLUS

1. 技术选型

前端:Html、CSS、JavaScript、Vue、Axios、Element Plus
后端:Spring Boot、Spring Security、MyBatis、MySQL、Redis
相关组件:HiKariCP(Spring Boot默认数据库连接池)、Spring-Data-Redis(Spring整合Redis)、Lombok(代码生成工具)、jwt(Json web token)、EasyExcel(Excel处理类库)、ECharts(前端图表库)
服务器:MySQL、Redis、Linux
项目依赖管理:Maven
项目开发工具:IDEA、Apifox

2. 导入数据库脚本dlyk.sql

3. 前端

3.1 前端环境类比于后端

在这里插入图片描述

3.2 安装nodejs2011版本和配置npm镜像

安装

3.3 Vite脚手架

3.3.1 用Vite快速创建一个JS语言, VUE框架的项目

项目想要放在地方就在哪个地方打开 cmd ,
然后以npm create vite@latest开始, 逐步选择项目名称, 框架和语言

如果创建失败并提示mkdir相关错误 , 把node安装目录关闭只读, 修改权限给到所有人
在这里插入图片描述

3.3.2 项目结构

在这里插入图片描述

1、node_modules/ 项目依赖的各种js依赖包;
2、public/ 公共的静态文件,一个网站图标;
3、src/ 源代码,我们前端写的源代码都会在这个文件夹下;
4、gitignore 提交git时忽略哪些文件;
5、index.html 项目的首页,访问入口文件;
6、package.json 整个项目对js依赖库的配置,还包括了启动、构建项目命令等;(类似maven的pom.xml)
7、package-lock.json 锁定各个js依赖包的来源和版本;
8、README.md 项目的使用帮助文档;
9、vite.config.js vite的配置文件;

3.3.3 运行第一个VUE项目

3.3.3.1 修改端口

在vite.config,.js文件指定端口:

export default defineConfig({plugins: [vue()],server:{host:'0.0.0.0' ,//ip地址port: 8081, // 设置服务启动端口号open: true, // 设置服务启动时是否自动打开浏览器}
})
3.3.3.2 下载依赖并启动

npm install
npm run dev
会自动打开浏览器

3.4 VUE

开发vue项目有两种方式:
1、传统方式,在html页面中加入

3.4.1 .VUE文件的三部分

1、标签,里面写html页面要展示的内容;
2、标签

3.4.2 .VUE文件运行流程

在这里插入图片描述

App.VUE:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

APP.VUE的入口是main.js:

//从VUE框架导入createApp函数
import { createApp } from 'vue'
//导入CSS样式, 不需要from
import './style.css'
//从App.VUE导入App组件
import App from './App.vue'//以App.VUE文件为参数创建App,并挂载到index.html中id为app的div中
createApp(App).mount('#app')

index.html:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><!-- VUE运行的结果挂载到此处显示,动态展示 --><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>

最终启动:

3.5 引入Element PLUS

基于Vue2.x (element-ui)
基于Vue3.x (element-plus)

项目中需要使用到一些页面的效果(表单、输入框、表格、按钮、布局、图标等等),都调用element-plus提供的;

3.5.1 项目中要安装element-plus:

npm install element-plus --save

-g 全局安装,安装到D:\programmer files\nodejs2011\node_global, 但本次我们只放到该项目下即可, 因此不用加-g
–save表示安装包信息会写入package.json的dependencies中,并且项目打包时会依赖到该模块,
–save-dev: 表示安装包信息会写入package.json的devDependencies中,并且项目打包时不会依赖到该模块, 仅在开发时使用

安装后可到项目下的node-modules文件夹下查找

3.5.2 使用element-plus

在main.js中

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//必须是先使用再挂载, 先生成效果再挂载
createApp(App).use(ElementPlus).mount('#app')app

element-plus提供的组件:
1、Basic 基础组件
2、配置组件
3、Form 表单组件
4、Data 数据展示
5、Navigation 导航
6、Feedback 反馈组件
7、Others 其他

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

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

相关文章

第十三、十四个知识点:用javascript获取表单的内容并加密

我们先来写一段代码&#xff1a; <body><form action"#" method"post">//写一个表单<span>用户名&#xff1a;</span><input type"text" id"username" name"username"><span>密码&a…

MyBatisPlus之分页查询及Service接口运用

一、分页查询 1.1 基本分页查询 配置分页查询拦截器 package com.fox.mp.config;import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springfra…

总结-回想2023

目录 背景: 熬夜和机械的工作带给身体带来的负担: 过程: 总结: 背景: 2024年不知不觉时间已经过去一年了&#xff0c;这一年似乎是最快的一年&#xff0c;回想起3年之前自己在外面打工的日子&#xff0c;浑浑噩噩那是的感觉就是度日如年&#xff0c;每天都在同样的地点&…

Nginx 缓存集成、清除、设置不缓存资源

文章目录 前言1. web缓存服务1.1 原理1.2 指令1.2.1 proxy_cache_path1.2.2 proxy_cache1.2.3 proxy_cache_key1.2.4 proxy_cache_valid1.2.5 proxy_cache_min_uses1.2.6 proxy_cache_methods 2. 缓存案例3. 缓存的清除3.1 删除对应的缓存目录3.2 使用第三方扩展模块ngx_cache_…

《Django+React前后端分离项目开发实战:爱计划》 02 安装Python和Django

02 Installing Python and Django 《Django+React前后端分离项目开发实战:爱计划》 02 安装Python和Django Because Django is a Python web framework, we first have to install Python. 由于 Django 是一个 Python 网络框架,我们首先要安装 Python。 Installing Pytho…

【芯片设计- RTL 数字逻辑设计入门 11.1 -- 状态机实现 移位运算与乘法 1】

文章目录 移位运算与乘法状态机简介SystemVerilog中的测试平台VCS 波形仿真 阻塞赋值和非阻塞赋值有限状态机&#xff08;FSM&#xff09;与无限状态机的区别 本篇文章接着上篇文章【芯片设计- RTL 数字逻辑设计入门 11 – 移位运算与乘法】 继续介绍&#xff0c;这里使用状态机…

Leetcode 21:合并两个有序链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 例&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] public class title21 {public static void main(String[] args) {int[] l1{1…

设计一个可以智能训练神经网络的流程

设计一个可以智能训练神经网络的流程,需要考虑以下几个关键步骤: 初始化参数:设定初始的batch size和learning rate,以及其他的神经网络参数。训练循环:开始训练过程,每次迭代更新网络的权重。监控loss:在每个训练周期(epoch)后,监控loss的变化情况。动态调整:根据l…

运放偏置电流Ibs消除方法-简单粗暴的使用电阻

1 电阻应用电阻之运放如何消除偏置电流的影响 我们会发现一个问题&#xff0c;或者前辈告诉我们无论是电压跟随或者正相比例还是其他运放应用电路&#xff0c;一定要在正相输入端串入一个电阻&#xff0c;而且这个电阻的值等于反向输入端反馈电阻网络的并联。 为什么要这么做…

C语言笔试题之求出三角形的最大周长

实例要求&#xff1a; 1、给定由一些正数&#xff08;代表长度&#xff09;组成的数组 nums &#xff1b;2、返回 由其中三个长度组成的、面积不为零的三角形的最大周长 &#xff1b;3、如果不能形成任何面积不为零的三角形&#xff0c;返回 0&#xff1b; 案例展示&#xff…

2021-2025年全国科普教育基地

2021-2025年全国科普教育基地 第一批认定名单 序号 所在地区 申报单位 基地名称 推荐单位 1 北京市 中国科学院北京纳米能源与系统研究所 中国科学院北京纳米能源与系统研究所 中国材料研究学会 2 北京市 中国测绘科学研究院 中国测绘科学研究院 中国测绘学会 3…

代码随想录算法训练营day14||二叉树part01、理论基础、递归遍历、迭代遍历、统一迭代

递归遍历 &#xff08;必须掌握&#xff09; 本篇将介绍前后中序的递归写法&#xff0c;一些同学可能会感觉很简单&#xff0c;其实不然&#xff0c;我们要通过简单题目把方法论确定下来&#xff0c;有了方法论&#xff0c;后面才能应付复杂的递归。 这里帮助大家确定下来递归…

Mongodb聚合:$planCacheStats

执行查询时&#xff0c;MongoDB 查询规划器会根据可用索引选择并缓存效率最高的查询计划。$planCache可以返回所有集合的查询计划缓存信息。要使用$planCache&#xff0c;必须把$planCacheStats阶段放在管道最前面。 语法 { $planCacheStats: { } }使用 $planCacheStats必须…

java和javascript的区别和联系

Java和JavaScript是两种非常流行的编程语言&#xff0c;尽管它们的名称相似&#xff0c;但实际上它们在设计、用途和运行环境等方面有很大的不同。以下是Java和JavaScript之间的主要区别和联系&#xff1a; 区别 设计目的和用途&#xff1a; Java 是一种通用的、面向对象的编程…

Mobile ALOHA 2: An Enhanced Low-Cost Hardware for Bimanual Teleoperation

文章目录 1. Mobile ALOHA 11.1 项目地址 2. Mobile ALOHA 22.1 相关链接2.2 Whats upgraded in II ? Reference Stanford 最新家务机器人 1. Mobile ALOHA 1 Mobile ALOHA: Learning Bimanual Mobile Manipulation with Low-Cost Whole-Body Teleoperation 1.1 项目地址 htt…

C语言函数栈帧的创建和销毁(逐步分析)

什么是函数栈帧 我们在写C语言代码的时候&#xff0c;经常会把一个独立的功能抽象为函数&#xff0c;所以C程序是以函数为基本单位的。 那函数是如何调用的&#xff1f;函数的返回值又是如何返回的&#xff1f;函数参数是如何传递的&#xff1f;这些问题都和函数栈帧有关系。 …

基于AST实现一键自动提取替换国际化文案

背景&#xff1a;在调研 formatjs/cli 使用&#xff08;使用 formatjs/cli 进行国际化文案自动提取 &#xff09;过程中&#xff0c;发现有以下需求formatjs/cli 无法满足&#xff1a; id 需要一定的语义化&#xff1b; defaultMessage和Id不能直接hash转换&#xff1b; 需要…

STM32F1 - 启动文件startup_stm32f10x_hd.s

startup_stm32f10x_hd.s 1> 启动文件类型2> 启动文件干了点啥&#xff1f;2.1> 设置栈2.2> 设置堆2.3> 设置中断向量表2.4> 复位程序2.5> 中断服务函数2.6> 用户栈和堆的初始化 3> __main库函数 1> 启动文件类型 标准库中提供&#xff1a;启动文…

ThinkPad X201 经典小黑 折腾玩

前段时间&#xff0c;在折腾ThinkPad T430时&#xff0c;偶然看到了ThinkPad X200&#xff0c;一个12.1英寸的高端便携小本。 想当年&#xff0c;但那是总裁级别才能用的&#xff0c;应该是接近2万元&#xff0c;我们是一直用DELL的。 没想到的是&#xff0c;在海鲜市场上&am…

Python scapy 构建多层嵌套数据包

Scapy 是一个相当灵活的网络库&#xff0c;并没有限制数据包可以有多少层&#xff0c;使用时可以根据需要添加或删除层&#xff08;注意遵循正确的协议栈顺序&#xff0c;逐层向上构建&#xff0c;不要打乱顺序&#xff0c;至少我把IP放在ICMP后面是ping不通的...不服可以亲自体…