Sample data - WilStead/VueCoreFramework GitHub Wiki

The project comes pre-loaded with a some sample code intended for demonstration purposes. This allows you to see VueCoreFramework performing its job of automatically wiring up a single-page-application and all the necessary views based on your Entity Framework scaffolding. It is strongly recommended that when you look at the project for the first time, you run it in debug mode and explore an intact version of the sample app, to see how all the parts are intended to work together before you follow the steps below.

The sample data class files also contain extensive documentation intended to help you learn how to use VueCoreFramework's dynamic data binding using examples with explanations.

What follows is a list of all the places in the program where you should remove or change sample code to make the project your own. Of course the entire project can be rewritten to your liking, but anything not listed below is part of the code that makes VueCoreFramework work as designed, not just sample data.

  1. In SPA/ClientApp/components/data, the folder named country contains a sample partial view, and should be deleted.
  2. SPA/ClientApp/components/home/home.vue should be rewritten (not deleted!) with your own homepage content. You are free to make this a complex view with sub-components, but if you change the name or path to this file you will need to replace the code in SPA/ClientApp/router.ts that points here.
  3. In SPA/ClientApp/components/topbar/topbar.vue you will find a set of social links which currently point to the social networks' main pages. Delete or customize these as desired.
  4. SPA/ClientApp/images/logo contains an svg file that is used as a placeholder for a site logo that appears on the top toolbar. You should replace the file with your site's actual logo, and replace the reference in SPA/ClientApp/components/app/app.scss with the new filename ... or rewrite SPA/ClientApp/components/app/app.vue to do something else entirely with the logo space.
  5. SPA/ClientApp/store/uiStore.ts exports an object called uiState with properties that include site author, contact email, and copyright year. These should be replaced with your own information. It also contains a menuItems object which defines the items which appear in the site's main navigation menu. See the MenuItem interface for documentation on the format of the items.
  6. SPA/ClientApp/stylus/main.styl contains the color scheme for the site, and is the place to customize the theme. See the Vuetify documentation for details. SPA/ClientApp/_theme.scss also contains references to the site colors for use in CSS elsewhere.
  7. Core.Configuration.IdentityServerConfig.cs contains configuration options related to IdentityServer4, and should be customized. It will be necessary to change the Startup.cs of each project, as well as SPA/ClientApp/authorization.ts, to correspond with each change you make. See the IdentityServer4 documentation for more information.
  8. The Sample project/namespace extends the core VueCoreFrameworkDbContext class into an ApplicationDbContext class, which contains DbSets built from the classes in Sample.Models. This separation is designed to make it easier for you to drop in your own data classes without worrying about making any breaking changes to the core functionality of the framework. Simply create a new project for your own data, and rename all solution references to VueCoreFramework.Sample with the root namespace of your new project. As long as you preserve the class names ApplicationDbContext and DbInitialize you should not need to make changes in the other core projects. You can then delete the Sample project entirely (or keep it around during development, for the documentation comments and testing purposes, if you prefer).
  9. Core.Models.DataItem.cs and Core.Models.NamedDataItem.cs are not required for the framework, as they are only used by the sample data classes. However they are likely to be useful, unless you are planning to wire up an existing database, so you may wish to keep these even if you are deleting the rest of the sample code.
  10. The appsettings.json file of each project contains settings related to [Email]], [[Logging]], and also define the default admin email (the contact email shown to site users when they need to contact someone for help). These should be customized. (Also note that some settings must be [supplemented with app secrets or environment variables).