Vue Js Getting Started

Posted on  by admin

Vue has quickly become one of the most popular front-end JavaScript frameworks. Because of its progressive design, you can start adding Vue.js to your existing applications or start creating new ones with a single script import.

Planning

It's also designed to scale, so it can grow with your applications.

.vue files (single file components)

We'll introduce ourselves and the video series and help you quickly start using Vue.js. Sample code: https://github.com/microsoft/vue-beginners-videos Learn Path: https://aka.ms/CreateWebsitesWithVueNode: https://nodejs.org/NPM: https://www.npmjs.com/Vue CLI: https://cli.vuejs.org/.
Because of its progressive design, you can start adding Vue.js to your existing applications or start creating new ones with a single script import.

Making a couple of changes

It's also designed to scale, so it can grow with your applications. If you're curious about Vue.js, we're here to help you get started.

Handling User Input

We'll introduce ourselves and the video series and help you quickly start using Vue.js.
Sample code: https://github.com/microsoft/vue-beginners-videos Learn Path: https://aka.ms/CreateWebsitesWithVueNode: https://nodejs.org/NPM: https://www.npmjs.com/Vue CLI: https://cli.vuejs.org/.
Recently I made the decision to build my own website because I wanted to a place to show off the projects I work on.
I've tried building websites in the past and I usually gave up on the project after a few days due to indecision about the framework I wanted to use.

Vue CLI

This time was going to be different. I've spent a lot of time writing in Javascript to learn about Discord's bot API so immediately that solidified my language choice for the backend.

Setup and Installation

For the frontend framework, many web developers will know that there are so many options to choose from and ultimately I wanted something that I could get up and running quickly which lead me to Vue.js. Website development can be challenging; however a lot of issues that developers might experience with a basic HTML, CSS & JS website can be resolved with the use of a frontend framework like Vue.js and some other accompanying tools. My criteria for choosing a frontend framework was:. Modularity - allowing me to split features into separate files.

Making Asynchronous REST API Calls

Easy to read - I didn't want to make the code complicated to troubleshoot.
Versatile - I didn't know if I even needed a frontend framework so I wanted to be able to use as little or as much vue as I wanted.
Vue.js includes Single File Components which would let me split up parts of my website into different files making them easily manageable.
Vue also utilises traditional HTML/CSS/JS structure making it easy to read and simply adds new v-function parametersto HTML tags like v-for to create a for loop.
In addition to the frontend framework, there are several other tools I've used in this project to make development a lot easier, starting with TailwindCSS.
Tailwind provides a large library of CSS classes that make styling HTML elements very quick an easy.
Next is ViteJS which provides quick an easy frontend tooling, eliminating the need for Weback or Rollup, It allows me to quickly setup server-side rendering if I want to use it instead of client-side rendering and lastly it has simple commands for spinning up a quick development build of the site for testing and a proper build/serve function for pushing it to production.

Anatomy of a Vue file

Lastly, as part of TailwindCSS, I am also using PostCSS to make CSS feel a bit more modern and readable while adding some CSS error handling and vendor prefixes.

Working with Forms

Personally I am using WSL 2 running Ubuntu so I will be providing setup steps for this particular environment. Node Package Manager is required to install the tools required for your project and both NodeJS + NPM can easily be installed by running: (note this command does not use sudo).
To setup the project, simply run npm init [email protected] in your terminal and follow the prompts to name your project (this will create a new folder in the current directory) and choose your framework (e.g. vue, react, svelte, etc).

Composing with Components

Once your project has been setup and Vite's dependencies have been installed, you can install TailwindCSS, PostCSS and AutoPrefixer for easy and modern styling options.

Creating a Component

In your terminal, run the following command:npm install -D [email protected] [email protected] [email protected]
Next initialise your config files with npx tailwindcss init -p which will generate tailwind.config.js and postcss.config.js.
I didn't personally make too many changes to these configuration files; however I would suggest adding './src/**/*.{html,vue,js,jsx,ts,css}' to Purge[] inside tailwind.config.js to remove the unused CSS styles.
Lastly, I would addmode: 'jit' to the config file to enable some additional features.

Two-way Binding

For more information on config files changes, I would reccommend reading the Tailwind docs.

A clearer Vue