<6>登陆页面

进度

🤑继续学了一点

1.初始化项目  get✔️

2.Vue Router 引入并创建Login及Dashbrosd页面  get✔️

3.T-Design 引入  get✔️

4.登陆页面   get✔️

登陆页面 (LoginIndex.vue)

(项目名：nina0605)

分为三部分：

1.<template></template>(具体的内容)

1.1".+啥啥啥"时，自动弄出来<div class="啥啥啥"></div>

1.2页面层层嵌套，代码就也需要层层嵌套

1.3登录页面代码如下（💁<t-card>和<t-form>都是在TDesgin里面直接引用的）

<template>
  <div class="login-container">
    <div class="content">
      <t-card>
        <h1>nina admin</h1>
        <t-form ref="form" class="login-form" :colon="true" :label-width="0">
          <t-form-item name="username">
            <t-input clearable placeholder="请输入用户名">
              <template #prefix-icon>
                <icon name="desktop" />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item name="password">
            <t-input type="password" clearable placeholder="请输入密码">
              <template #prefix-icon>
                <icon name="lock-on" />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item>
            <t-button theme="primary" type="submit" block>登录</t-button>
          </t-form-item>
        </t-form>
      </t-card>
    </div>
  </div>
</template>

2.<script></script>(目前只发现用于import)

2.1因为<template>中，使用了icon，所以<script>如下所示：

<script setup lang="ts">
import { Icon } from 'tdesign-vue-next'
</script>

3.<style></style>(样式)

3.1用了“less”：

<style lang="less" scoped>

所以要安装依赖：

npm install less less-loader --save-dev
# 或
yarn add less less-loader -D

 

3.2样式的设置依赖于“class=啥啥啥”中的'啥啥啥'

具体表现为（login-form就是那个啥啥啥 ）：

.login-form {
      align-items: center;
      justify-content: center;
    }

3.3和<template>一一对应,页面样式也是嵌套的（或许不是，我目前不太清楚）