3 minutes and your project VueJs created, how to create project VueJs? 😎

Reading: 3 minutes.

Introdução:

Hey everyone, today I’m going to show you in SIMPLE steps how to create a project in Vue.js and use this amazing framework to display the famous hello world in your browser. As a suggestion for the next step, I’ll leave a post on how to create a dynamic and very easy form for your projects and studies.

How can I use Vue.js now?

For using Vue.js, according to its own documentation, there are two ways to import it for usage. One way is by using the CDN, which is the easiest way for you to start using and testing its functionalities. The CDN is just a link that you insert into your HTML, so create an index.html file and insert Vue.js using the following:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
 
 

Showing my first Hello World

At the core of Vue.js is a system that allows us to declaratively render data in the Document Object Model (DOM) using a simple template syntax within your index.html file.

 
  <script src=“https://unpkg.com/vue@3/dist/vue.global.js”></script>

 

   <div id=“app”>{{ message }}</div>

 

  <script>
  const { createApp, ref } = Vue

 

  createApp({
    setup() {
     const message = ref(‘Hello vue!’)
     return {
      message
     }
    }
  }).mount(‘#app’)
  </script>
 
 
This way it should be:
 
Hello World!

Now, let's create the project using the CLI 😆

If your goal is to create more powerful and customizable tools, it is necessary to install Vue.js using NPM. You install Vue.js on your machine and use it for development.

Make sure you have an up-to-date version of Node.js installed and your current working directory is the one where you intend to create a project. Run the following command in your command line:

npm create vue@latest
 

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … <your-project-name> 
✔ Add TypeScript? … No / Yes 
✔ Add JSX Support? … No / Yes 
✔ Add Vue Router for Single Page Application development? … No / Yes 
✔ Add Pinia for state management? … No / Yes 
✔ Add Vitest for Unit testing? … No / Yes 
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright 
✔ Add ESLint for code quality? … No / Yes 
✔ Add Prettier for code formatting? … No / Yes 
Scaffolding project in ./<your-project-name>... Done.

If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:

> cd <your-project-name> 
> npm install 
> npm run dev

You should now have your first Vue project running! 

So now, you already your project VueJs created with success. In next post i’m gonna explain all archive and structure of the VueJs, rest assured, is more simple than it seems.

Leave A Comment