Vue从零开始开发管理系统（学习笔记第一节）

前言

本节笔记记录了如何创建一个Vue-Cli项目，并简单开发系统的登录页面。

---

一、创建Vue-Cli项目

在终端窗口运行vue ui，接下来是在可视化系统中创建一个Vue-cli项目，其中的选项为“Babel，Router，使用配置文件”，之后安装axios依赖和element ui插件（选择按需引入）。 

二、项目起步

1.删除初始化的HelloWorld等文件

• 删除组件中的
• 删除路由中的
• 删除App.vue中的
• 删除整个view文件夹

2.创建登录页面

1. 在components中创建组件，名为LoginPage.vue,并在style中写上scoped确保样式是局部生效的。
2. 在router/index.js中，引入组件LoginPage.vue

   import Login from '../components/LoginPage.vue'
   

3. 在router/index.js中使用组件，在routes数组中添加一个对象{path:'路径',component:组件名}

   const routes = [
     {path:'/login',component:Login}
   ]

4. 在App.vue中，添加<router-view>占位符。
5. 再在router/index.js中添加重定向，即在数组中添加一个新的对象

   {path:'/',redirect:'/login'}

3.编写登录页面 

1. 写出基础框架

       <div class="box">
           <div class="login">
               <div class="logo"></div>
               <div class="form"></div>
           </div>
       </div>

2. 补充出组件（需要在element.js中按需引入）

       <div class="box">
           <div class="login">
               <div class="logo">
                   <img src="../assets/logo.png" alt="">
               </div>
               <div class="form">
                   <el-form>
                       <el-form-item></el-form-item>
                       <el-form-item></el-form-item>
                       <el-form-item></el-form-item>
                   </el-form>
               </div>
           </div>
       </div>

    
3. 完善组件内容

       <div class="box">
           <div class="input">
               <div class="logo">
                   <img src="../assets/logo.png" alt="">
               </div>
               <div class="form" >
                   <el-form :model="form" :rules="rules" ref="Ref">
                       <el-form-item prop="username">
                           <el-input clearable v-model="form.username" prefix-icon="el-icon-user"></el-input>
                       </el-form-item>
                       <el-form-item prop="password">
                           <el-input :show-password="true" v-model="form.password" prefix-icon="el-icon-lock"></el-input>
                       </el-form-item>
                       <el-form-item style="display:flex; justify-content: flex-end">
                           <el-button type="primary" @click="precheck()">登录</el-button>
                           <el-button type="info" @click="rest()">重置</el-button>
                       </el-form-item>
                   </el-form>
               </div>
           </div>
       </div>

    
4.  美化CSS

   .box{
       background: linear-gradient(to right, #e5e5be, #003973); 
       height: 100%;
       width: 100%;
   }
   .login{
       height: 300px;
       width: 450px;
       background: linear-gradient(to right, #89253e, #3a6186);
       left: 50%;
       top: 50%;
       position: absolute;
       transform: translate(-50%,-50%);
       border-radius: 10px;
       box-shadow: 0 0 4px #ddd;
   }
   .logo{
       height: 130px;
       width: 130px;
       border-radius: 50%;
       border: 1px solid #eee;
       padding: 10px;
       background-color: #fff;
       left: 50%;
       position: absolute;
       transform: translate(-50%,-50%);
       box-shadow: 0 0 10px #ddd;
   }
   img{
       width: 100%;
       height: 100%;
       border-radius: 50%;
       background-color: #eee;
   }
   .form{
       position: absolute;
       bottom: 0;
       width: 100%;
       box-sizing: border-box;
       padding: 0px 20px;
   }

border-box:

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

bottom:

属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。 

---

总结