WordPress by design is a blog software, however due to its popularity it's often used as a Content Management System (CMS). The best way I found to make WordPress behave like a CMS is with Pods Framework. Pods Framework is an open source plugin and encompasses many features that make it a robust tool. It allows one to easily create new content types (also known as post type) via UI. It also provides the ability to add fields to custom and base content types in WordPress. As WordPress evolves into the block based approach, the plugin is evolving as well.
Rendering Fields in a Template
Once you created your custom content type with fields with Pods, you can pull them in via editor. But that's a lot of work and responsibility for the content authors. Developers can still define preset content templates, the trick is to use blocks that comes with the Pods Framework. You can place the following code snippets in your single-your-post-type.html.
<!-- wp:pods/pods-block-field {"field":"$field_name"} /-->
Note, this code will render just the field value. If you want to use the value in a JavaScript code block or as an HTML attribute, you can. Here are a couple of examples.
<div id="vue-app-hook"
data-property="<!-- wp:pods/pods-block-field {"field":"$field_name"} /-->"
data-attribute="<!-- wp:pods/pods-block-field {"field":"$field_name_2"} /-->"></div>
<script type="text/javascript">
const expectJSON = <!-- wp:pods/pods-block-field {"field":"$field_with_json"} /-->;
const expectRawText = '<!-- wp:pods/pods-block-field {"field":"$field_with_plain_text"} /-->';
<script>