Add app and test vue components

[tinykite]

What this does

This adds two components, App.vue and HelloWorld.vue. It's basically a very light refactoring of what we already had into Vue-specific components: a primary App.vue that we'll add all individual components to, and an additional test component with some superfluous text defined in a ref to test out that we can scope JavaScript to an individual component.

This component is intentionally extremely basic for the purpose of iterative development. In the future, another PR will update this component to do something more meaningful than simply render "Hello world"

Screenshots

If Vue Dev Tools are installed, and Vue has successfully loaded, there should be a "Vue" tab in dev tools for browsers such as Vue and Arc that displays a tree view of the currently rendered components:

The rendered "Hello world!" text in Perma

How to test

• To toggle the hello world text, you will need to visit: https://perma.test:8000/manage/create?dwft_vue-dashboard=1
• In the process of writing this component, I went through an entire saga of not getting a cookie to be able to be added in response to toggling the feature flag with this url. As best as I can tell, this is happening because of the current login session, and can be fixed by logging out and logging back in again.

• If the cookie shows up in dev tools but you don't see "Hello world!" on the page, you may need to do a hard refresh or open an incognito window, and verify that:

  • Vue has loaded, using the Vue dev tools
  • If the vue bundle has been detected on the page, you should be able to spot the new components in a "vue" tab of your dev tools panel.
  • The div that is used to mount the Vue app, <div id="vue-app"></div> is present on the page

  Open Questions

• In the process of developing this, webpack created two separate exports in the static directory: dashboard.js and dashboard.js.map. Are these necessary to ship to production, or should we update our .gitignore to ignore these and other static exports?
• More generally (please note: these questions don't need to be answered):
  • Should we be using a code formatter, for example say Prettier in the Django repo?
  • Should we be using Typescript?

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 71.22%. Comparing base (aafc6c0) to head (4c41e23). Report is 1 commits behind head on develop.

:exclamation: Current head 4c41e23 differs from pull request most recent head b51bc33. Consider uploading reports for the commit b51bc33 to get more accurate results

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #3485 +/- ## ======================================== Coverage 71.22% 71.22% ======================================== Files 48 48 Lines 6512 6512 ======================================== Hits 4638 4638 Misses 1874 1874 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[tinykite]

No problem at all!

And thank you for this context — I've never worked on a project that included map files or other forms of production-ready build files, but I've also never worked on a project with an embedded web application within Django, and it's easy enough to commit whatever files are necessary.