Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

【送鼠标需求】拆分 index.vue 组件 和 css #527

Open
Tracked by #526
nihaojob opened this issue Oct 31, 2024 · 1 comment · May be fixed by #529
Open
Tracked by #526

【送鼠标需求】拆分 index.vue 组件 和 css #527

nihaojob opened this issue Oct 31, 2024 · 1 comment · May be fixed by #529

Comments

@nihaojob
Copy link
Member

nihaojob commented Oct 31, 2024 •
edited
Loading

背景

现在src/views/home/index.vue文件为编辑器入口，单个文件过大，需要将文件拆分出header、lefte、right组件，对组件进行归类，抽离相关逻辑和css,作为子组件引入到index.vue中。

目标

让 index.vue 变小，让组件目录更清晰，功能不变。

参考形式

index.vue
image

top.vue
image

left.vue
image

right.vue
image
@nihaojob nihaojob changed the title 拆分 index.vue 组件 和 css 拆分 index.vue 组件 和 css【完成送鼠标】 Oct 31, 2024
@nihaojob nihaojob changed the title 拆分 index.vue 组件 和 css【完成送鼠标】 【送鼠标需求】拆分 index.vue 组件 和 css Oct 31, 2024
@nihaojob nihaojob mentioned this issue Oct 31, 2024
Open
26 tasks
zcf0508 added a commit to zcf0508/vue-fabric-editor that referenced this issue Oct 31, 2024
@zcf0508
Draft: Split index.vue into header, left, and right components
4105901 
Fixes ikuaitu#527

**[IMPORTANT]: This code is generated by github copilot.**


Split the `index.vue` file into separate components for better modularity and maintainability.

* **Header Component**
  - Create `header.vue` and move header-related template, script, and style from `index.vue` to this file.
  - Import necessary components and modules used in the header section.

* **Left Component**
  - Create `left.vue` and move left-related template, script, and style from `index.vue` to this file.
  - Import necessary components and modules used in the left section.

* **Right Component**
  - Create `right.vue` and move right-related template, script, and style from `index.vue` to this file.
  - Import necessary components and modules used in the right section.

* **Index.vue Adjustments**
  - Remove header, left, and right sections from the template.
  - Import and use the new `header.vue`, `left.vue`, and `right.vue` components.
  - Adjust script and style references to accommodate the new components.

* **CSS Adjustments**
  - Remove CSS related to the header, left, and right sections from `index.module.less`.
  - Move the CSS related to the header section to `header.vue`.
  - Move the CSS related to the left section to `left.vue`.
  - Move the CSS related to the right section to `right.vue`.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ikuaitu/vue-fabric-editor/issues/527?shareId=XXXX-XXXX-XXXX-XXXX).
@zcf0508 zcf0508 linked a pull request Oct 31, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Split index.vue into header, left, and right components zcf0508/vue-fabric-editor
2 participants
@nihaojob and others