This is the 20th day of my participation in the Genwen Challenge
After all, I am not good at the development language. Because of this gold-digging activity, the project suddenly wanted to record the development process. So can get attention, I still thank this little friend ~
I hope the project record is of some value to you, and we welcome your comments and criticisms!
All right, without further ado, let’s talk about today’s notes.
Take a look at the number of plug-ins introduced into FosSA today:
It feels like it’s a little bit too much, just a little project. So the next step is to consider how to reduce the introduction of third party plug-ins without value. Remove Primevue completely today.
Refactoring – Complete removalprimevue
Weather layout
I didn’t know how to use the weather layout. I made it into a component to see how to extend it later, so it was relatively easy to reconstruct:
<template>
<n-badge
:value="temp"
class="weather"
>
<n-image
width="40"
:src="weatherIcon"
/>
</n-badge>
</template>
<script lang="ts">
import { defineComponent} from 'vue';
import { NBadge, NImage } from 'naive-ui';
import weathericons from '~/images/weathericons/100.png';
Copy the code
There is nothing to say, just use an NBadge component to solve.
Create event Components
<template> <Dialog v-model:visible="eventDialogVisible" :modal="true" @click="$emit('update:visibleFullDialog', eventDialogVisible)" > <div class="p-fluid"> <span class="p-float-label"> <InputText id="eventInput" v-model="eventText" Type ="text" /> <label for="eventInput"> Event content </label> </span> </div> <div class="p-fluid p-formgrid p-grid"> <Calendar id="range" v-model="dates" date-format="MM d,yy" ::minDate="Date()" selection-mode="range" :inline="true" /> </div> <template #footer> <Button label=" "icon=" PI pi-times" class="p-button-danger" @click="$emit('update:visibleFullDialog', False)" /> <Button label=" check" icon=" PI pi-check" autofocus @click="add" /> </template> </Dialog> </template>Copy the code
Main uses of core: Dialog, InputText, Calendar:
Use Naive UI to find the refactoring:
<template> < n-topics-content title=" Create event "closable > <n-space vertical> <n-input ID ="eventInput" V-model :value="eventText" placeholder=" placeholder "/> <n-date-picker V-model :value="dates" type="daterange" : Actions ="['confirm']" clearable /> </n-space> <template #footer> </template> </n-drawer-content> </template>Copy the code
The main interface
The main screen is mainly the last drop-down menu:
<Menu
id="overlay_tmenu"
ref="menu"
:model="items"
:popup="true"
/>
...
import Menu from 'primevue/menu';
Copy the code
This is done using Naive UI’s drop down menu:
<n-dropdown trigger="hover" placement="bottom-start" :options="options" @select="dropdownClick" > <n-button text type="success" :keyboard="false" class="dropdown" > <n-icon> <list-icon /> </n-icon> </n-button> </n-dropdown> ... import { NDropdown, NDrawer, NDrawerContent, NButton, NIcon } from 'naive-ui'; import { List as ListIcon, PowerOff as PowerOffIcon } from '@vicons/fa'; Options: [{label: 'create event ', key: 'goCreateEventView', icon() {return h(NIcon, null, {default: () => h(Add12FilledIcon),});}, on: this.goCreateEventView,}, {label: 'set ', key: 'goSettingView', icon() { return h(NIcon, null, { default: () => h(LauncherSettings24FilledIcon), }); }, on: This. goSettingView,}, {type: 'Divider ', key: 'd1',}, {label:' Exit application ', key: 'quit', icon() { return h(NIcon, null, { default: () => h(PowerOffIcon), }); }, on: this.quit, }, ],Copy the code
This code basically refers to the official website document, and there is no problem. In addition, the previous operation button used the Fullcalendar custom button, and they have been removed this time (to prepare for the subsequent custom calendar component) :
Execute to see the effect:
At this point, I’ve basically changed everything I need to use, and I’m left with references.
Remove all references
// index.ts import PrimeVue from 'primevue/config'; import ToastService from 'primevue/toastservice'; import 'primevue/resources/themes/saga-green/theme.css'; import 'primevue/resources/primevue.min.css'; import 'primeicons/primeicons.css'; / / package. Json "primeflex" : "^ 2.0.0", "primeicons" : "^ 4.1.0", "primevue" : "3.3.5."Copy the code
summary
Finally, we re-upgrade yarn to generate a new yarn.lock file for Github Action automatic packaging service.
Today is the 20th day, and I have basically completed the logic and code. The remaining 10 days are to check the problems of every function and module, make up the Test cases, and refer to the mainstream open source projects to make up what needs to be done. At least the following contents are not completed:
Finally, look at the three dependencies missing:
The code has been synced to Github: github.com/fanly/fanly…