前端/在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地址，在浏览器中访问

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