使用 Vue CLI 创建 Vue 项目的详细步骤：
- 首先需要安装 Node.js 和 npm，可以在官网下载并安装：https://nodejs.org/en/
检查node，npm版本：
node -v
npm -v
- 安装 Vue CLI，可以在终端（命令行）中输入以下命令进行安装：
npm install -g @vue/cli
检查vue版本命令：
vue -V
- 创建 Vue 项目，在终端中进入到项目要存放的文件夹，并输入以下命令：
vue create 项目名称
-
接下来会出现一个交互式的选项界面，可以根据自己的需要进行选择。也可以直接按回车键，使用默认选项。
-
创建完毕后，在终端中进入项目所在的文件夹，并输入以下命令启动项目：
npm run serve
- 打开浏览器，在地址栏中输入 http://localhost:8080 即可访问项目页面。
- 改造一下项目，新建login页面
login页面完整代码：
<template>
<div class="login-container">
<h1 class="title">登录</h1>
<form class="login-form">
<div class="form-group">
<label class="form-label" for="username">用户名</label>
<input
class="form-control"
type="text"
id="username"
name="username"
v-model="username"
/>
</div>
<div class="form-group">
<label class="form-label" for="password">密码</label>
<input
class="form-control"
type="password"
id="password"
name="password"
v-model="password"
/>
</div>
<button class="login-button" type="submit" @click.prevent="login">
登录
</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
};
},
methods: {
login() {
// 在这里编写登录逻辑，例如向后端发送请求等
},
},
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f8f8f8;
}
.title {
text-align: center;
margin-bottom: 20px;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-group {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 20px;
}
.form-label {
margin-bottom: 8px;
font-size: 16px;
font-weight: bold;
}
.form-control {
padding: 12px;
border: 1px solid #dcdcdc;
border-radius: 4px;
font-size: 16px;
}
.login-button {
margin-top: 20px;
padding: 12px 20px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.login-button:hover {
background-color: #66b1ff;
}
</style>
- 改造router—-> index.ts
添加login页面的路由如下：
{
path: "/login",
name: "login",
component: () =>
import(/* webpackChunkName: "about" */ "../views/Login.vue"),
}
- 改造App.vue
最终效果：
~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~
~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~
~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/135705.html
