Creating a Simple App with Vue
In this guide, we’ll post a step-by-step tutorial on how to create a simple app online with Vue.
To begin, go to https://codesandbox.io, and familiarize yourself with their online text editor.
- Index.html
- Index.js
- Package.json
- Variables.scss
- Baseinputtext.vue
- Todolist.vue
- Todolistitem.vue
- App.vue
- Vue npm Package
Simple to-do list app with Vue
Locate Your File Editor
Once you’ve located your file editor, you’ll need to input this dependency:
https://www.npmjs.com/package/vue.
Import Files
Now, import the following files in order to view and customize your simple new app.
- Index.html
- App.vue
- index.js
- package.json
- variables.scss
Now, create a new custom folder and import the following Components:
- BaseinputText.vue
- TodoList.vue
- TodoListItem.vue
Styling Your App
Change the styling of your new app by editing the variables.scss.
Customize the font color and add custom styling using SASS.
See it in Action
Finally, use the sandbox text editor to see your app in action.
Start customizing the new app to make yours, and save your file by integrating with Github.
