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…