There are various ways of adding a settings page to your WordPress plugin.
  1. WordPress Settings API
   2.A Custom Fields Framework 
   3 Using a Code Generator
   4. Using the REST API 
   5.VueJS 

1..WordPress Settings API
The WordPress Settings API was included in  WordPress 2.7 to facilitate developers to register settings fields on existing settings forms in the dashboard, as well as creating new settings forms. It lets you define settings pages. This is definitely the most manual of the methods discussed in this post, but its worth understanding all thats needed.
At the foremost, we register a new menu item and page that will contain our settings form. Lets add the page under the Settings top-level menu item in the WordPress dashboard:

function dbi_add_settings_page() {
    add_options_page( 'Example plugin page', 'Example Plugin Menu', 'manage_options', dbi-example-plugin, 'dbi_render_plugin_settings_page' );
}
add_action( 'admin_menu', 'dbi_add_settings_page' );


The fifth argument to add_options_page is the name of the function used to display the contents of the page, in this case, it will be the settings form. That function needs to have a form element and some function calls to communicate with the Settings API:

function dbi_render_plugin_settings_page() {
    ?>
    <h2>Example Plugin Settingsh2>
    <form action="options.php" method="post">
         
        settings_fields( 'dbi_example_plugin_options' );
        do_settings_sections( 'dbi_example_plugin' ); ?>
        <input name="submit" class="button button-primary"