Creating a Skeleton App

Let’s rip out the nonessential code from the default Vue project so that we have a skeleton app to work with.

Delete and Rename Files

Let’s clean house.

  1. delete public/favicon.ico
  2. delete src/assets/logo.svg
  3. delete src/assets/base.css
  4. delete everything in src/assets/main.css except the #app { … } rule.
  5. delete all of the files and directories inside of src/components, but leave src/components
  6. delete src/stores/counter.js
  7. delete src.views/AboutView.vue

Rename src/views/HomeView.vue to src/views/Home.vue.

Your file structure should look like the following.

Edit Files

Now let’s edit some of the files so that the project will build.

Modify router.index.js so that it contains the following:

[code language=”javascript”]
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const router = createRouter({
history:createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path:'/',
name:'home',
component:Home,
}
],
})

export default router
[/code]

Modify src/views/Home.vue so that it contains the following:

[code language=”html”]
<script setup>
</script>

<template>
<main>
Hello World!
</main>
</template>

<style scoped>
</style>
[/code]

Modify src/App.vue so that it contains the following:

[code language=”html”]
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
<RouterView />
</template>

<style scoped>
</style>
[/code]

One last file to modify.   Delete the <link> tag in index.html.

Test Your Project

Now run the following command and click the localhost link to verify the app is running.  If you received an error- fix the error and try again.  When successful, all you should see on the app’s web page is Hello World!

$ npm run dev

If you see Hello World!, run the build command.

$ npm run build

After building, add all files in /dist to the Git staging area, commit the changes, and push to GitHub.  If successful, GitHub should redeploy your code to your Digital Ocean web server.

Check your website, if it has not updated, resolve the issue.

Note: When testing the app, remember the route that the router is using.  It is just /.  Do NOT put /index.html after your URL.