项目分析一

一、初始化

cd Desktop  // 切换到桌面
mkdir 项目名   // 创建文件夹
cd 项目名   //切换到这个项目名文件
git init   // 创建仓库
git pull 地址 master  // 拉到某个地址的master分支的代码
code ./    // 进入项目
// 打开项目以后，就可以关闭终端

二、运行项目

npm install   // 安装依赖
npm run dev   // 运行项目

三、修改拉下的文件内容

1.删除main.js中跟mock相关内容
2.删除mock文件夹
3.删除vue.config.js中:before:require('./mock')
4.将vue.config.js中lintOnSave的值改为false
5.重新运行项目：npm run dev
6.修改views/login/inde.vue中handleLogin()方法的内容，修改成下面的：
handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$router.push({ path: "/" });

          // this.loading = true
          // this.$store.dispatch('user/login', this.loginForm).then(() => {
          //   this.$router.push({ path: this.redirect || '/' })
          //   this.loading = false
          // }).catch(() => {
          //   this.loading = false
          // })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

7.将权限路由premission.js里的内容全部删除
8.查看settings.js,将title内容改成‘后台管理系统’，然后再重新运行项目（npm run dev)
9.将store/modules/user.js内容清空：
const state = {}

const mutations = {}

const actions = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

10.将store/getters.js改成以下：
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
}
export default getters

11.提交到远程仓库
git status
git add .
git commit -m '描述内容'
如果是已有仓库，直接复制已有仓库里的git命令
npm run dev

12.清空拦截器utils/request.js,只保留以下内容
import axios from 'axios'

const service = axios.create()

service.interceptors.request.use()

service.interceptors.response.use()

export default service

13.清空api/table.js 和 api/user.js 
table.js: 
import request from '@/utils/request'
export function getList() {}

user.js:
import request from '@/utils/request'

export function login() {}

export function getInfo() {}

export function logout() {}

14.导入图片和样式资源 
导入的common.scss要在index.scss中导入：
@import './common.scss';
分号一定要记得加,将Easy Sass 插件禁用，然后再重新运行项目

15.修改端口，在.ene.davelopment 添加
port = 8888   //是看vue.config.js里面定义的端口号是什么
重新运行项目，看看有没有修改掉端口号
再查看login页面有没有问题

四、开始实现开发

views/login/index.vue中
1.设置头部背景
<!-- 放置标题图片 @是设置的别名-->
<div class="title-container">
        <h3 class="title">
          <img src="@/assets/common/login-logo.png" alt="">
        </h3>
 </div>

2.设置背景图片
.login-container {
  ...
  background-image: url('~@/assets/common/login.jpg'); // 设置背景图片
  background-position: center; // 将图片位置设置为充满整个屏幕
....
}

3.设置手机号和密码的字体颜色
$light_gray: #68b0fe;  // 将输入框颜色改成蓝色

4.设置输入表单整体背景色
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.7); // 输入登录表单的背景色
    border-radius: 5px;
    color: #454545;
  }

5.设置错误信息的颜色,要放到全局的样式里
 .el-form-item__error {
    color: #fff
  }

6.设置登录按钮的样式
<el-button
      class="loginBtn"
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="handleLogin"
        >登录</el-button
      >
需要给el-button 增加一个loginBtn的class样式
.loginBtn {
  background: #407ffe;
  height: 64px;
  line-height: 32px;
  font-size: 24px;
}

7.修改显示的提示文本和登录文本
   <div class="tips">
        <span style="margin-right:20px;">账号: 13800000002</span>
        <span> 密码: 123456</span>
   </div>