02 登录

1 定义登录组件

2 通过router.js渲染到app.vue当中

3 在根组件中放一个路由的占位符：

通过路由匹配到的组件都会渲染到 router-view当中进行展示

4 测试：

5只有用户访问根路径（/），就让他重定向到login上(/login)

main.js中：

启动报错1：

没有安装 vue-router，注意看看在进行 npm 安装的时候，使用的文件位置是否正确（在项目目录下安装才对）

vue-router 要指定版本，否则会报错：Cannot read properties of undefined (reading 'install')

错误“Cannot read properties of undefined (reading ‘install‘) at Vue.use” 的解决方案_cannot read properties of undefined (reading 'inst_FunSober的博客-CSDN博客

启动报错2：

Vue报错：Unknown custom element: router-view - did you register the component correctly

Unknown custom element: ＜router-view＞ - did you register the component correctly?_咸鱼肥美妖娆的博客-CSDN博客

Vue报错：Unknown custom element: router-view - did you register the component correctly_unknown custom element: <router-view> - did you re-CSDN博客

7 添加背景

没有安装less

记得重启服务器

或者：

第三步：安装less和less-loader

在vue项目打开终端，进入项目安装（我记得less好像全局安装没用，每个vue项目要单独安装）

less目前的最高版本是5+，但保险起见，我们还是安装4+比较好（我不知道安装5+会不会报错）

npm install less@4 --save-dev

less-loader的版本号要搭配webpack的版本号来选择，webpack@4+可以选择的less-loader版本是5~7（忘记在哪里查到的了，不确定一定是对的，不过我安7是没问题的）

npm install less-loader@7 --save-dev

第四步：使用less

完成less的安装后，我们只需要在style节点上加上lang=‘less’，就可以使用less语法了

<style lang='less' scoped>

</style>

8 创建全局样式表

给页面设置背景， 可以给大盒子添加样式

测试：

9 绘制盒子

10 登录组件头部布局

<img src="@/assets/logo.png" alt="" />

现在的脚手架可以直接使用@

<template>
  <div class="login_container">

    <div class="login-box">
        <div class="avatar_box">
        <img src="@/assets/logo.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'my-login'

}

</script>

<style lang="less" scoped>
.login_container{
    background-color: #2b4b6b;
    height: 100%;
}

.login-box{
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  .avatar_box {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    box-shadow: 0 0 10px #ddd;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eeeeee;
    }
}
}
</style>

11 登录组件表单布局

首先下载element-ui :

npm install --save element-ui

然后进行按需导入

11.1 按需导入

elementui是按需导入的:

1 放在项目中的babel.config.js 文件中： 

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

2 引入组件列表：

​​​​​​​

import Vue from 'vue'
// 引入弹框提示组件 Message 需要全局引用 使用 Vue.prototype
import {
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  Breadcrumb,
  BreadcrumbItem,
  Card,
  Row,
  Col,
  Table,
  TableColumn,
  Switch,
  Tooltip,
  Pagination,
  Dialog,
  MessageBox,
  Tag,
  Tree,
  Select,
  Option,
  Cascader,
  Alert,
  Tabs,
  TabPane,
  Steps,
  Step,
  CheckboxGroup,
  Checkbox,
  Upload,
  Timeline,
  TimelineItem
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Input)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(Submenu)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
Vue.use(Alert)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Steps)
Vue.use(Step)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Upload)
Vue.use(Timeline)
Vue.use(TimelineItem)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

3 在 main.js当中导入

Can't resolve 'element-ui'如果没有安装，安装命令：
npm install --save element-ui

4 查看效果：

label-width控制文本宽度,去掉就没有宽度了

input宽度 需要通过 style设置 style="width:80%"

vscode element ui 提示 插件

 我在vscode里找到了应该提示很强的elementUI提示库，Element UI Snippets。提示功能很强大。我就喜欢这种不需要怎么敲的插件，真的太好用了！

11.2 编写样式

或者：

1 表单的位置： 通过给el-form添加class进行设置
2 按钮的位置： 可以添加el-row进行控制 <el-row type="flex" justify="end">

12 小图标布局

12.2 导入用户名密码图片

因为element里边没有我们需要的图标，所以我们 用阿里的图标库

1 导入图标：导入到assets文件夹中

2 导入字体图标

3 使用

有可能eslint 校验icon font的js报错，进行忽略

如果esllint校验iconfont.js失败， 忽略文件

===============

el-form 

 

label-width控制文本宽度,去掉就没有宽度了

input宽度 需要通过 style设置 style="width:80%"

通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部

 多选和单选

input添加 按钮

input当中包含一个el-button
 
   <el-input placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>

设置宽度：

栏栅布局： 分24分 使用el-row el-col 来划分

间隔 ：gutter =20