使用 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
最终效果：
~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~ ~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~ ~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~
