一.使用图形化界面
  
  
  
  
  
，创建vue项目

vue ui(在根目录下 
  
  
  
  
 ，打开cmd,启动图形化界面)

 添加插件

 添加element-ui插件

 这里选择import on demand

 安装好了

 添加依赖

 添加axios依赖

 添加好了

二.创建Git仓库 


 


 


 


 


 ，连接并上传刚刚创建的项目

 在项目文件目录下打开git的命令窗口
 
 
 
 
 
，git bash here

 查看状态git status  
   
   
   
   
 ，发现有很多文件没有加入暂存区 

 

 

 

 

 ，

 然后将这些文件加入暂存区

 

 

 

 

 
，git add .

 与远程仓库建立连接          ，然后将项目推送到仓库

 这样 
 

 
 

 
 

 
 

 
 

 ，创建的项目就与远程仓库建立连接并推送成功了

 三.用idea打开刚刚的项目

在终端用命令创建一个login分支

创建分支之后










，去启动项目

 项目启动成功

如果很多文件颜色都是灰色的               ，那需要按照提示 
 
 
 
 
 
 
 
 
 
 ，安装所提示的东西

修改 

 那么首页那些花花绿绿的就没有了















，这个文件已修改          ，页面就会有效果

 然后去修改路由

一开始这样：

 修改后：

 删掉组件下面自带的文件 
 
  
 
  
 
  
 
  
 
  ，新建一个Login.vue文件









，我们登录页面的内容就写在这个文件里面        

login.vue文件建好之后
  
  
  
  
  
，我们要在index.js文件当中 
  
  
  
  
 ，配置好login.vue的路        由

不要忘了App.vue里面还有个路由显示出口 


 


 


 


 


 ，出口你都不写
 
 
 
 
 
，页面怎么显示效果

然后我们现在就开始在Login.vue这个文件里面写我们需要的内容

首先我们去设置全局的css样式

 然后将他引入到main.js这个文件中

这个文件就是你后续需要用到什么依赖啊啥的  
   
   
   
   
 ，就要引入到这个文件中

less有什么用

  less报错 

 

 

 

 

 ，是因为缺少依赖

 

 

 

 

 
，那么要去安装两个依赖

 然后页面就显示了

 在assets这个包下面建一个css目录          ，再建一个

最终登录的界面效果

<template> <div class="login_container"> <!--登录的组件{{msg}}--> <div class="login_box"> <div class="tp_box"> <img src="../assets/images/login.png" width="80px" alt=""> </div> <el-form label-width="0" class="login_form"> <el-form-item> <el-input placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item> <el-input placeholder="请输入密码"></el-input> </el-form-item> <el-form-item class="btns"> <el-button type="primary">登录</el-button> <el-button type="info">取消</el-button> </el-form-item> </el-form> </div> </div> </template> <script> export default { // eslint-disable-next-line vue/multi-word-component-names name: Login, data: function () { return { msg: zsf } } } </script> <!--这个less有什么用--> <style lang="less" scoped> .login_container { //background-color: #d4edda; background-color: powderblue; background-image: linear-gradient(to right,powderblue,deepskyblue); height: 100%; } .login_box{ width: 450px; height: 450px; //background-color: antiquewhite; background-color: white; border-radius: 15%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 10px powderblue;/*加阴影*/ .tp_box{ position: fixed; left: 50%; transform: translate(-50%); border-radius: 50%;/*圆角*/ background-color:powderblue; width: 120px; height: 120px; padding: 10px; box-shadow: 0 5px 20px deepskyblue;/*加阴影*/ img{ width: 100%; height: 100%; border-radius: 50%; } } } .btns{ display: flex; justify-content: flex-end; } .login_form{ position: absolute; left: 50%; transform: translate(-50%); bottom: 60px; width: 90%; padding: 0px 20px; /*就算你要撑起来 
 

 
 

 
 

 
 

 
 

 ，你也只能往里面撑起来*/ box-sizing: border-box; } </style>

另一个样式

加上表单验证并实现重置

<template> <div class="login_container"> <!--登录的组件{{msg}}--> <div class="login_box"> <div class="tp_box"> <img src="../assets/images/login.png" width="80px" alt=""> </div> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0" class="login_form"> <!--prop="username:指定要执行的规则"--> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="iconfont icon-yonghu" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" prefix-icon="iconfont icon-suoding" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item class="btns"> <el-button type="primary">登录</el-button> <el-button type="info" @click="resetLoginForm">取消</el-button> </el-form-item> </el-form> </div> </div> </template> <script> export default { // eslint-disable-next-line vue/multi-word-component-names name: Login, data () { return { loginForm: { username: , password: }, loginFormRules: { username: [ /* blur:失去焦点的时候触发 */ { required: true, message: 请输入用户名, trigger: blur }, { min: 6, max: 9, message: 长度在 6 到 9 个字符, trigger: blur } ], password: [ /* blur:失去焦点的时候触发 */ { required: true, message: 请输入密码, trigger: blur }, { min: 6, max: 9, message: 长度在 6 到 9 个字符, trigger: blur } ] } } }, methods: { resetLoginForm () { console.log(this) this.$refs.loginFormRef.resetFields() } } } </script> <!--这个less有什么用--> <style lang="less" scoped> .login_container { //background-color: #d4edda; background-color: powderblue; //background-image: linear-gradient(to right,powderblue,deepskyblue); background-image: linear-gradient(to right, powderblue, pink, plum); height: 100%; } .login_box { width: 450px; height: 450px; //background-color: antiquewhite; background-color: white; border-radius: 15%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px powderblue; /*加阴影*/ .tp_box { position: fixed; left: 50%; transform: translate(-50%); border-radius: 50%; /*圆角*/ background-color: powderblue; width: 120px; height: 120px; padding: 10px; box-shadow: 0 5px 20px deepskyblue; /*加阴影*/ img { width: 100%; height: 100%; border-radius: 50%; } } } .btns { display: flex; justify-content: flex-end; } .login_form { position: absolute; left: 50%; transform: translate(-50%); bottom: 60px; width: 90%; padding: 0px 20px; /*就算你要撑起来










，你也只能往里面撑起来*/ box-sizing: border-box; } </style>

再用一下阿里巴巴的图标库

 nfont.cn/ 小俊会编码：..123123

下载好之后               ，将压缩包解压 
 
 
 
 
 
 
 
 
 
 ，将文件夹加入到项目assets目录下

 在表单输入框当中使用