npm install -g @vue/cli

vue create my-project

vue add router
vue add vuex
vue add pwa

npm create vite@latest my-project --template vue
cd my-project
npm install

npm run dev

npm run build

npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

npm install pinia

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};
</script>

npm install cypress --save-dev

npx cypress open

// cypress/integration/example.spec.js
describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/');
    cy.contains('h1', 'Welcome to Vue.js');
  });
});

npx sb init

npm run storybook

// Button.stories.js
import Button from './Button.vue';

export default {
  title: 'Example/Button',
  component: Button
};

const Template = (args) => ({
  components: { Button },
  setup() {
    return { args };
  },
  template: '<Button v-bind="args" />'
});

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button'
};