This is the 16th day of my participation in Gwen Challenge

To reconstruct, the best way is to remove the Primevue introduced before, you will find a full screen of red, this is every change, less a piece of red, will let you have a great sense of achievement.

But since I’m just starting, I’m going to keep both of them, so that I have a contrast.

According to the introduction on the official website, we will install Naive UI and the corresponding fonts as well as the recommended ICONS:

yarn add -D naive-ui
yarn add -D vfonts

yarn add -D @vicons/fluent
yarn add -D @vicons/fa
Copy the code

Naive UI can be imported on demand, so you can delete the Primevue section directly:

Just import the fonts in the entry file of your App to adjust Naive UI fonts.

// import 'vfonts/ firacode.css 'Copy the code

Modify the Setting page

<template> <Sidebar v-model:visible="sidebarVisible" :base-z-index="1000" position="full" @click="$emit('update:visibleFullSetting', SidebarVisible) "> < h2 > < / h2 > < InputSwitch v shows holiday - model =" inputSwitchFestivalsModel" @change="$emit('update:changeShowFestivals', InputSwitchFestivalsModel) "/ > < h2 > < / h2 > < according to weather forecast InputSwitch v - model =" inputSwitchWeatherModel" @change="$emit('update:changeShowWeather', InputSwitchWeatherModel "/> <div v-show="inputSwitchWeatherModel" class="p-field" > <label for="location"> </label> <InputMask V-model ="locationStr" mask="999.99,99.99" @complete="changeLocalLocation" /> </div> <div class="p-p-4" style="text-align:center;" > <Knob v-model="focus_time" :step="5" :min="5" :max="120" /> <Button type="button" :label="focusLabel" icon="pi pi-play" class="p-d-block p-mx-auto p-button-success" @click="focus" /> </div> </Sidebar> </template>Copy the code

Through checking, it is found that the most components are introduced in Setting, so we start with this one and first replace the button:

Replace button component

NButton, NIcon button component and icon component are mainly introduced here, as well as the corresponding icon CaretRight:

import Button from 'primevue/button';
import { NButton, NIcon } from 'naive-ui';
import { CaretRight as CaretRightIcon } from '@vicons/fa';
Copy the code

Take a look at the results and compare them. They are basically the same, so we can remove the primevue/button that we introduced earlier, and of course add the code logic synchronization.

  <n-button type="primary" size="large" @click="focus">
    <template #icon>
      <n-icon>
        <caret-right-icon />
      </n-icon>
    </template>
  {{ focusLabel }}
</n-button>
Copy the code

replaceInputSwitch

InputSwitch should correspond to NSwitch. Try it:

import { NSwitch, NButton, NIcon } from 'naive-ui'; . <InputSwitch v-model="inputSwitchFestivalsModel" @change="$emit('update:changeShowFestivals', inputSwitchFestivalsModel)" /> <n-switch />Copy the code

Take a look at the implementation:

Now it’s time to complete the attributes and logic:

<n-switch :defaultValue="inputSwitchFestivalsModel" size="large" @click="updateFestivalsModel" /> ... updateFestivalsModel(): void { this.inputSwitchFestivalsModel = ! this.inputSwitchFestivalsModel; this.$emit('update:changeShowFestivals', this.inputSwitchFestivalsModel); },Copy the code

It’s almost the same as it was before.

summary

It is a delicate job to replace components. Tonight, we mainly added a new component library and replaced two core components: NButton and NSwitch. In fact, the other components are the same, but it is difficult at the beginning.

I’m going to replace all of them, see how easy it is, and write down the complicated ones. To be continued!

The code has been synced to Github: github.com/fanly/fanly…