Element UI组件库应用 ~ 思路梳理

（练习模块化步骤思维、减少细节纠结，也是方便后期能自己搓完设计并有效落地成网页。）

—— 叠甲：logs 可能会比较乱。

Vue 2 : Element UI

1. 制定思路：页面上需要用到哪些组件？如何排版？

我们主要分为 3 个板块：

• 注册
  • 大字标题；
  • 用户名、密码：Input 框 *2；
  • 确定：button

• 登录

  与注册相同，在 “确定” 下方多一个 跳转注册 的链接。

• AI 问答主页
  1. 左侧列表：
     • 大字标题；
     • （历史对话）标题
  2. 核心区域：
     • 大字标题；
     • 聊天内容窗口（可独立滚动）
     • 问题（多行 input ）框 + 发送 button

——理着理着就发现有几个功能要搞定细化。

画个饼先：

（我觉得这些 ”基础用户体验“ 可以一边升级 vue3 、一边完善）

• 退出登录（可以返回主页重新登录（不一定，之后要补上保持用户登录状态）？）
• 从 ”恢复的历史对话“ 返回 “新创建的对话”

• 历史对话命名：

  我有两种方案：

  1. “对话 1”、“对话 2”……
  2. 以日期进行分类，”年月日 + 时间“ 作为标题。
• 按回车触发 button 。
  • 提问换行的话，则是 shift + enter。
• 刷新后保留提问框输入。

---

1. 开始组件替换。

先不要着急把老样式一口气删光！我知道你很急，但原则上是 添新不删旧，先加新内容、再慢慢删掉老内容。

确定好 需要的组件 后，到官方文档中进行查找。（这玩意纯搬运工活，上岗与否的关键在于 是否熟练 。（毕竟工作中要在更短的时间内完成更多的活。））

比如 Input 输入框 ，找到组件介绍 → 查看代码 → 按需引入后，照猫画虎地进行使用 。

按需引入

👉 完整组件列表

• 执行：

-D 是 --save-dev 的缩写，表示 把这个依赖包加入到 package.json 的 devDependencies 中。

yarn add babel-plugin-component -D

• 修改 babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', { modules: false }] // 等价于原来的 ["es2015", { "modules": false }]
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

• 在 main.js 中要啥引入啥。

举例：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});