前端/在vscode中创建Vue3项目

html input元素

<input type="text"/><br>
<input type="password"/><br>
<input type="button"/><br>
<input type="checkbox"/><br>
<input type="color"/><br>
<input type="date"/><br>
<input type="time"/><br>
<input type="email" /><br>
<input type="file"/><br>
<input type="url"/><br>
<input type="week"/><br>
<input type="number"/><br>
<input type="month"/><br>
<input type="radio"/><br>
<input type="range"/><br>
<input type="reset"/><br>
<input type="search"/><br>
<input type="submit"/><br>

添加css样式

使用：

1. box-sizing: border-box;: 确保元素的 width 和 height 包含 padding 和 border，防止布局混乱。
2. 输入框 :focus 伪类: 当输入框被点击或获得焦点时，边框会变成蓝色 (#007bff)，并添加一个柔和的阴影，这能给用户清晰的视觉反馈。
3. 按钮 :hover 伪类: 当鼠标悬停在按钮上时，背景颜色会变深，告诉用户这个元素是可点击的。

* {box-sizing: border-box;
}body {font-family: Arial, sans-serif;padding: 20px;background-color: #f4f4f4;
}input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="week"],
input[type="month"],
input[type="date"],
input[type="time"] {width: 300px;padding: 10px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;transition: border-color 0.3s, box-shadow 0.3s;
}input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {border-color: #007bff;box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);outline: none; /* 移除浏览器默认的焦点轮廓 */
}input[type="button"],
input[type="submit"],
input[type="reset"] {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;margin-right: 10px;transition: background-color 0.3s;
}input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {background-color: #0056b3;
}input[type="checkbox"],
input[type="radio"] {margin-right: 5px;
}input[type="file"] {display: block;margin-bottom: 15px;
}input[type="color"] {height: 40px;width: 40px;border: none;padding: 0;vertical-align: middle;
}input[type="range"] {width: 300px;margin: 15px 0;
}

使用js添加交互

按钮点击提示

document.addEventListener('DOMContentLoaded', () => {const submitBtn = document.querySelector('input[type="submit"]');const resetBtn = document.querySelector('input[type="reset"]');const buttonBtn = document.querySelector('input[type="button"]');if (submitBtn) {submitBtn.addEventListener('click', (event) => {event.preventDefault(); // 阻止表单默认的提交行为alert('您点击了提交按钮！');});}if (resetBtn) {resetBtn.addEventListener('click', () => {alert('您点击了重置按钮！');});}if (buttonBtn) {buttonBtn.addEventListener('click', () => {alert('您点击了一个普通按钮！');});}
});

输入框字符计数

document.addEventListener('DOMContentLoaded', () => {const myTextInput = document.getElementById('myText');const charCountSpan = document.getElementById('charCount');const maxLength = 50;if (myTextInput && charCountSpan) {myTextInput.addEventListener('input', () => {const currentLength = myTextInput.value.length;charCountSpan.textContent = `${currentLength}/${maxLength}`;if (currentLength > maxLength) {charCountSpan.style.color = 'red';} else {charCountSpan.style.color = '#333';}});}
});

使用 npm 来管理项目包

安装 Node.js

https://www.runoob.com/nodejs/nodejs-install-setup.html

提示：安装完之后重启vscode。

初始化项目

npm init -y

安装依赖包

npm install vue

这条命令会做以下几件事：

1. 下载包：从 npm 仓库下载 Vue.js 及其所有依赖。

2. 安装包：将下载的包安装到项目目录下的 node_modules 文件夹中。

更新 package.json：在 package.json 文件的 dependencies 字段中，自动添加 “vue”: “版本号” 这一行，记录下安装的 Vue.js 版本。

创建一个基于 Vite 的 Vue 项目

虽然 npm install vue 可以直接在任何项目中安装 Vue，但对于一个全新的 Vue 项目，官方更推荐使用 Vite 脚手架工具来创建。

创建项目

npm create vue@latest

进入项目目录

cd vue-project

安装依赖

npm install

调用代码格式化工具

npm run format

启动开发服务器

npm run dev

在浏览器中访问

根据上图中的Local地址，在浏览器中访问

博客内容如有错误欢迎指出~