MeetUp Vue 2023

Introducción básica a Vue 3.

🔗 Links

💻 Run Repository Locally

Clone the project

  git clone https://github.com/Toyos90/meetup-vue

Go to the project directory

  cd meetup-vue

Install dependencies

  npm install

Start the server

  npm run dev

🕵🏽 Running Tests

To run tests, run the following command

  npm run test:unit

🪜 Dependencies

meetup-vue@0.0.0 
├── @mdi/font@7.2.96
├── @vitejs/plugin-vue@4.3.4
├── @vue/test-utils@2.4.1
├── eslint-plugin-vue@9.17.0
├── eslint@8.49.0
├── jsdom@22.1.0
├── vite@4.4.9
├── vitest-svelte-kit@0.0.7
├── vitest@0.34.4
├── vue-router-mock@1.0.0
├── vue-router@4.2.4
├── vue@3.3.4
├── vuetify@3.4.0-alpha.1
└── vuex@4.1.0

💽 Installation a New Vue3 Project - Steps

Install project-name with npm

    npm init vue@latest

Optional features

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

Go to project directory

    cd <project-name>

Install dependencies

    npm install

Start the server

    npm run dev

🍍 Basic Code Structure

Basic Main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

Basic View/Component

<script setup>
    //YOUR LOGIC FOR VIEW OR COMPONENT
</script>

<template>
    //YOUR HTML TEMPLATE
</template>

<style scoped>
    //YOUR STYLES FOR THIS VIEW OR COMPONENT
<style>

Basic Router

import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'

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

export default router;

Toyos90/meetup-vue