el |
您所在的位置：网站首页 › 用户指引 › el |
el
|
作者简介：大家好，我是文艺理科生Owen，某车企前端开发，负责AIGC+RAG项目目前在卷的技术方向：工程化系列，主要偏向最佳实践希望可以在评论区交流互动，感谢支持~~~
最近公司项目新增了新手引导的需求，由于项目中使用了element-plus组件库， el-tour 组件肯定是首选。神贴中大部分是在讲vue-tour，几乎没有el-tour的身影。所以决定分享一下。 先看一下最终的效果~
只实现这个需求的话确实不难，价值在于实现需求的整个分析过程。一般在需求实现前，我通常会多想一步，或许这就是天然的代码洁癖吧。主要有两点思考： 新增代码必然会耦合到现有的业务逻辑中，但新手引导只是一个独立的功能，增加了原业务代码的复杂度新手引导会与需求迭代保持同步，如何提高代码的可维护性，进而实现快速迭代说明：el-tour组件的关键是目标对象的关联 设计方案基于上述思考点，有了一个初步的设计结构图：
简单来说，将引导说明文案单独保存在一个配置文件中，并引入到每个页面的公共引导组件中。 这里我们将通过一个demo来举例说明。 最佳实践demo实现 快速生成项目：pnpm create vite vue3-pdf-demo --template vue运行： cd vue3-pdf-demo pnpm install pnpm run dev项目启动成功后，安装 element plus组件库，pnpm i element-plus，此处的版本是2.7.2安装完成后，复制下面代码，引入和注册组件库。 // main.js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') 在App.vue中新建一些元素，效果图和代码如下:
|
【本文地址】
今日新闻 |
推荐新闻 |