corso vuejs
parent: 3c253f47 | patch | commit | ignore whitespace
Cristiano Magro
2024-12-30 2eca01af6b2d881073a0f2a102a5667da6c0bb3e 
step lezione 07
22 files added
400 ■■■■■ changed files
07 - development setup/vue-cli-02-adding-a-component/.browserslistrc 3 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/.eslintrc.js 17 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/.gitignore 22 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/HOW-TO-USE.pdf patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/babel.config.js 5 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/package.json 23 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/public/favicon.ico patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/public/index.html 21 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/src/App.vue 32 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/src/components/FriendContact.vue 37 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-02-adding-a-component/src/main.js 10 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/.browserslistrc 3 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/.eslintrc.js 17 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/.gitignore 22 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/HOW-TO-USE.pdf patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/babel.config.js 5 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/package.json 23 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/public/favicon.ico patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/public/index.html 21 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/src/App.vue 92 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/src/components/FriendContact.vue 37 ●●●●● patch | view | raw | blame | history
07 - development setup/vue-cli-03-finished/src/main.js 10 ●●●●● patch | view | raw | blame | history 
 07 - development setup/vue-cli-02-adding-a-component/.browserslistrc


New file


@@ -0,0 +1,3 @@


> 1%


last 2 versions


not dead




 07 - development setup/vue-cli-02-adding-a-component/.eslintrc.js


New file


@@ -0,0 +1,17 @@


module.exports = {


  root: true,


  env: {


    node: true


  },


  'extends': [


    'plugin:vue/vue3-essential',


    'eslint:recommended'


  ],


  parserOptions: {


    parser: 'babel-eslint'


  },


  rules: {


    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',


    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'


  }


}




 07 - development setup/vue-cli-02-adding-a-component/.gitignore


New file


@@ -0,0 +1,22 @@


.DS_Store


node_modules


/dist




# local env files


.env.local


.env.*.local




# Log files


npm-debug.log*


yarn-debug.log*


yarn-error.log*


pnpm-debug.log*




# Editor directories and files


.idea


.vscode


*.suo


*.ntvs*


*.njsproj


*.sln


*.sw?




 07 - development setup/vue-cli-02-adding-a-component/HOW-TO-USE.pdf

Binary files differ



 07 - development setup/vue-cli-02-adding-a-component/babel.config.js


New file


@@ -0,0 +1,5 @@


module.exports = {


  presets: [


    '@vue/cli-plugin-babel/preset'


  ]


}




 07 - development setup/vue-cli-02-adding-a-component/package.json


New file


@@ -0,0 +1,23 @@


{


  "name": "vue-first-app",


  "version": "0.1.0",


  "private": true,


  "scripts": {


    "serve": "vue-cli-service serve",


    "build": "vue-cli-service build",


    "lint": "vue-cli-service lint"


  },


  "dependencies": {


    "core-js": "^3.6.5",


    "vue": "^3.0.0"


  },


  "devDependencies": {


    "@vue/cli-plugin-babel": "~4.5.0",


    "@vue/cli-plugin-eslint": "~4.5.0",


    "@vue/cli-service": "~4.5.0",


    "@vue/compiler-sfc": "^3.0.0-0",


    "babel-eslint": "^10.1.0",


    "eslint": "^6.7.2",


    "eslint-plugin-vue": "^7.0.0-0"


  }


}




 07 - development setup/vue-cli-02-adding-a-component/public/favicon.ico




 07 - development setup/vue-cli-02-adding-a-component/public/index.html


New file


@@ -0,0 +1,21 @@


<!DOCTYPE html>


<html lang="en">


  <head>


    <meta charset="utf-8" />


    <meta http-equiv="X-UA-Compatible" content="IE=edge" />


    <meta name="viewport" content="width=device-width,initial-scale=1.0" />


    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />


    <title><%= htmlWebpackPlugin.options.title %></title>


  </head>


  <body>


    <noscript>


      <strong


        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work


        properly without JavaScript enabled. Please enable it to


        continue.</strong


      >


    </noscript>


    <div id="app"></div>


    <!-- built files will be auto injected -->


  </body>


</html>




 07 - development setup/vue-cli-02-adding-a-component/src/App.vue


New file


@@ -0,0 +1,32 @@


<template>


  <section>


    <h2>My Friends</h2>


    <ul>


      <friend-contact></friend-contact>


      <friend-contact></friend-contact>


    </ul>


  </section>


</template>




<script>


export default {


  data() {


    return {


      friends: [


        {


          id: "manuel",


          name: "Manuel Lorenz",


          phone: "0123 45678 90",


          email: "manuel@localhost.com",


        },


        {


          id: "julie",


          name: "Julie Jones",


          phone: "0987 654421 21",


          email: "julie@localhost.com",


        },


      ],


    };


  },


};


</script>




 07 - development setup/vue-cli-02-adding-a-component/src/components/FriendContact.vue


New file


@@ -0,0 +1,37 @@


<template>


  <li>


    <h2>{{ friend.name }}</h2>


    <button @click="toggleDetails">Show Details</button>


    <ul v-if="detailsAreVisible">


      <li>


        <strong>Phone:</strong>


        {{ friend.phone }}


      </li>


      <li>


        <strong>Email:</strong>


        {{ friend.email }}


      </li>


    </ul>


  </li>


</template>




<script>


export default {


  data() {


    return {


      detailsAreVisible: false,


      friend: {


        id: "manuel",


        name: "Manuel Lorenz",


        phone: "0123 45678 90",


        email: "manuel@localhost.com",


      },


    };


  },


  methods: {


    toggleDetails() {


      this.detailsAreVisible = !this.detailsAreVisible;


    }


  }


};


</script>




 07 - development setup/vue-cli-02-adding-a-component/src/main.js


New file


@@ -0,0 +1,10 @@


import { createApp } from 'vue';




import App from './App.vue';


import FriendContact from './components/FriendContact.vue';




const app = createApp(App);




app.component('friend-contact', FriendContact);




app.mount('#app');




 07 - development setup/vue-cli-03-finished/.browserslistrc


New file


@@ -0,0 +1,3 @@


> 1%


last 2 versions


not dead




 07 - development setup/vue-cli-03-finished/.eslintrc.js


New file


@@ -0,0 +1,17 @@


module.exports = {


  root: true,


  env: {


    node: true


  },


  'extends': [


    'plugin:vue/vue3-essential',


    'eslint:recommended'


  ],


  parserOptions: {


    parser: 'babel-eslint'


  },


  rules: {


    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',


    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'


  }


}




 07 - development setup/vue-cli-03-finished/.gitignore


New file


@@ -0,0 +1,22 @@


.DS_Store


node_modules


/dist




# local env files


.env.local


.env.*.local




# Log files


npm-debug.log*


yarn-debug.log*


yarn-error.log*


pnpm-debug.log*




# Editor directories and files


.idea


.vscode


*.suo


*.ntvs*


*.njsproj


*.sln


*.sw?




 07 - development setup/vue-cli-03-finished/HOW-TO-USE.pdf

Binary files differ



 07 - development setup/vue-cli-03-finished/babel.config.js


New file


@@ -0,0 +1,5 @@


module.exports = {


  presets: [


    '@vue/cli-plugin-babel/preset'


  ]


}




 07 - development setup/vue-cli-03-finished/package.json


New file


@@ -0,0 +1,23 @@


{


  "name": "vue-first-app",


  "version": "0.1.0",


  "private": true,


  "scripts": {


    "serve": "vue-cli-service serve",


    "build": "vue-cli-service build",


    "lint": "vue-cli-service lint"


  },


  "dependencies": {


    "core-js": "^3.6.5",


    "vue": "^3.0.0"


  },


  "devDependencies": {


    "@vue/cli-plugin-babel": "~4.5.0",


    "@vue/cli-plugin-eslint": "~4.5.0",


    "@vue/cli-service": "~4.5.0",


    "@vue/compiler-sfc": "^3.0.0-0",


    "babel-eslint": "^10.1.0",


    "eslint": "^6.7.2",


    "eslint-plugin-vue": "^7.0.0-0"


  }


}




 07 - development setup/vue-cli-03-finished/public/favicon.ico




 07 - development setup/vue-cli-03-finished/public/index.html


New file


@@ -0,0 +1,21 @@


<!DOCTYPE html>


<html lang="en">


  <head>


    <meta charset="utf-8" />


    <meta http-equiv="X-UA-Compatible" content="IE=edge" />


    <meta name="viewport" content="width=device-width,initial-scale=1.0" />


    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />


    <title><%= htmlWebpackPlugin.options.title %></title>


  </head>


  <body>


    <noscript>


      <strong


        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work


        properly without JavaScript enabled. Please enable it to


        continue.</strong


      >


    </noscript>


    <div id="app"></div>


    <!-- built files will be auto injected -->


  </body>


</html>




 07 - development setup/vue-cli-03-finished/src/App.vue


New file


@@ -0,0 +1,92 @@


<template>


  <section>


    <header>


      <h1>My Friends</h1>


    </header>


    <ul>


      <friend-contact></friend-contact>


      <friend-contact></friend-contact>


    </ul>


  </section>


</template>




<script>


export default {


  data() {


    return {


      friends: [


        {


          id: "manuel",


          name: "Manuel Lorenz",


          phone: "0123 45678 90",


          email: "manuel@localhost.com",


        },


        {


          id: "julie",


          name: "Julie Jones",


          phone: "0987 654421 21",


          email: "julie@localhost.com",


        },


      ],


    };


  },


};


</script>




<style>


* {


  box-sizing: border-box;


}


html {


  font-family: "Jost", sans-serif;


}


body {


  margin: 0;


}


header {


  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);


  margin: 3rem auto;


  border-radius: 10px;


  padding: 1rem;


  background-color: #58004d;


  color: white;


  text-align: center;


  width: 90%;


  max-width: 40rem;


}


#app ul {


  margin: 0;


  padding: 0;


  list-style: none;


}


#app li {


  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);


  margin: 1rem auto;


  border-radius: 10px;


  padding: 1rem;


  text-align: center;


  width: 90%;


  max-width: 40rem;


}


#app h2 {


  font-size: 2rem;


  border-bottom: 4px solid #ccc;


  color: #58004d;


  margin: 0 0 1rem 0;


}


#app button {


  font: inherit;


  cursor: pointer;


  border: 1px solid #ff0077;


  background-color: #ff0077;


  color: white;


  padding: 0.05rem 1rem;


  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);


}


#app button:hover,


#app button:active {


  background-color: #ec3169;


  border-color: #ec3169;


  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);


}


</style>




 07 - development setup/vue-cli-03-finished/src/components/FriendContact.vue


New file


@@ -0,0 +1,37 @@


<template>


  <li>


    <h2>{{ friend.name }}</h2>


    <button @click="toggleDetails">Show Details</button>


    <ul v-if="detailsAreVisible">


      <li>


        <strong>Phone:</strong>


        {{ friend.phone }}


      </li>


      <li>


        <strong>Email:</strong>


        {{ friend.email }}


      </li>


    </ul>


  </li>


</template>




<script>


export default {


  data() {


    return {


      detailsAreVisible: false,


      friend: {


        id: "manuel",


        name: "Manuel Lorenz",


        phone: "0123 45678 90",


        email: "manuel@localhost.com",


      },


    };


  },


  methods: {


    toggleDetails() {


      this.detailsAreVisible = !this.detailsAreVisible;


    }


  }


};


</script>




 07 - development setup/vue-cli-03-finished/src/main.js


New file


@@ -0,0 +1,10 @@


import { createApp } from 'vue';




import App from './App.vue';


import FriendContact from './components/FriendContact.vue';




const app = createApp(App);




app.component('friend-contact', FriendContact);




app.mount('#app');