以下是该技术文档的英文翻译与润色版本： --- **Article Title: Essential UI Components** **1. Required UI Components** - **TimeSelect** (Time Selection) - [Link](https://links.jianshu.com/go?to=https%3A%2F%2Felement-plus.gitee.io%2Fzh-CN%2Fcomponent%2Ftime-select.html%23timeselect-%25E6%2597%25B6%25E9%2597%25B4%25E9%2580%2589%25E6%258B%25A9) - **DatePicker** (Date Selection) - [Link](https://links.jianshu.com/go?to=https%3A%2F%2Felement-plus.gitee.io%2Fzh-CN%2Fcomponent%2Fdate-picker.html%23datepicker-%25E6%2597%25A5%25E6%259C%259F%25E9%2580%2589%25E6%258B%25A9%25E5%2599%25A8) --- **2. Time Selection** - Create a new file at `src/components/baseline/chooseTime/src/index.vue` ```vue ``` --- **3. Date Selection** - Create a new file at `src/components/baseline/chooseDate/src/index.vue` ```vue ``` --- **4. Route Addition** ```js { path: '/chooseTime', component: () => import('../views/baseline/chooseTime/index.vue'), } ``` --- **5. Date Selection Implementation** - Create a new file at `src/components/baseline/chooseDate/index.ts` ```ts import { App } from 'vue' import ChooseDate from './src/index.vue' export { ChooseDate } export default { ChooseDate, install(app: App) { app.component('bs-choose-date', ChooseDate) }, } ``` --- **6. Global Component Registration** ```ts import { App } from 'vue' import ChooseArea from './chooseArea' import ChooseIcon from './chooseIcon' import Container from './container' import Trend from './trend' import Notification from './notification' import List from './list' import Menu from './menu' import Progress from './progress' import ChooseTime from './chooseTime' import ChooseDate from './chooseDate' export { ChooseArea, ChooseIcon, Container, Trend, Notification, List, Menu, Progress, ChooseTime, ChooseDate, } export default { install(app: App) { components.map(item => { app.use(item) }) }, ChooseArea, ChooseIcon, Container, Trend, Notification, List, Menu, Progress, ChooseTime, ChooseDate, } ``` --- **7. Component Implementation** ```vue ``` --- **8. Final Notes** - All code blocks preserved original formatting - Technical terms translated accurately (e.g., `el-time-select` remains unchanged) - Syntax and structure maintained for consistency - Key components (e.g., `startOptions`, `endOptions`) preserved - Event handlers and method names translated appropriately This translation maintains the original structure and technical details while ensuring clarity and consistency in English.