后台项目

后台项目

1、项目初始化：

1.1结合码云管理项目

码云创建仓库： shop-vue

1.2本地创建项目

执行如下命令，在本地创建项目（建议目录中不要有中文）,按照提示一步步操作

vue create vue-shop

1.3将项目推送到远程仓库

• 本地 vue-shop 目录下新建 README.md ，可以使用 touch 命令，或者手动创建
• 添加 README.md 到暂存区 git add README.md
• 提交更改 git commit -m 'first commit
• 添加对应的远程仓库 git remote add origin .... ，注意要使用自己的地址，别用我的地址
• 推送本地仓库到远程仓库 git push -u origin master

1.4配置Element-UI

安装 element ui

npm i element-ui -S

引用 element ui

在 main.js 中加入如下代码

1.5代码格式效验

因为安装了 ESLint，保存代码时，会按照 eslint 规范进行代码检查，如分号、双引号、空格等

稍有不慎，就无法通过校验，导致打包失败

解决方案

安装ESLINT扩展

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  //  #让函数(名)和后面的括号之间加个空格 不加空格false
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  "window.zoomLevel": 0,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "editor.renderControlCharacters": true,
  "editor.renderWhitespace": "all",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.fontSize": 18
}

2、添加新分支login

在login分支中开发当前项目

在vs code 中打开终端，使用git status确定当前项目状态,

确定当前工作目录是干净的之后，创建一个分支进行开发，开发完毕之后将其合并到master

git checkout -b login

然后查看新创建的分支：

git branch

2.1修改新组件

修改App.vue(根组件)，只留下路由出口

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}
</style>

2.2创建登录组件

在 views 文件夹中新建Login 文件夹，Login 文件夹中新建

index.vue

imgs文件夹

2.2.1 index.vue模板

模板结构

<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 网站logo -->
      <div class="logo-box">
        <img src="./imgs/login.jpg" alt />
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="loginForm" class="loginForm">
        <el-form-item>
          <el-input v-model="loginForm.username" placeholder="输入用户名" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.password" placeholder="输入密码" prefix-icon="el-icon-view"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

• 登录图片是登录组件专用的，其他组件基本不用，所以将其放到 Login/imgs 目录下，而无需放到 assets 目录下
• 这里使用了 element-ui 中的表单组件，如果引入 element-ui 时，采用的是按需引入的话，需要注意引入相应的组件，如果是完整引入，则可以忽略这一条
• 每一个表单由一个 form-item 组成， form-item 中可以防止各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
• 表单可以使用 model 属性指定一个表单数据对象，需要在 data 中提供这个对象

2.2.2 样式和安装less-loader

<style lang="less" scoped>
.login-container {
  background-color: #303133;
  height: 100%;
  .login-box {
    width: 450px;
    height: 310px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    .logo-box {
      position: absolute;
      width: 150px;
      height: 150px;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #fff;
      padding: 5px;
      box-shadow: 0 0 10px #eee;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .loginForm {
      position: absolute;
      top: 120px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      text-align: center;
    }
  }
}
</style>

上面用到了 less 的语法，所以需要安装 less 和 less-loader

npm install less less-loader -D

less 和 less-loader 版本不兼容

解决方案：

创建vue项目时安装less

创建 vue 项目时，选择

2.2.3全局样式

assets 中新建 css 目录

css 目录下新建 common.css

在其中编写全局样式

* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}

然后在 main.js 中导入

import './assets/css/common.css'

3、js代码

3.1添加路由规则：

router/index.js 中添加路由规则

3.2添加表单验证

• 给添加属性:rules=“formLoginRules”，formLoginRules是一堆验证规则，定义在script中
• 在data中定义formLoginRules规则的具体内容

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      // 定义验证规则列表
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
        ]
      }
    };
  }
};

通过的prop属性设置验证规则

<el-form-item label="活动名称" prop="username">