| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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": "^5.0.8", |
|---|
| | | "@vue/cli-plugin-eslint": "^5.0.8", |
|---|
| | | "@vue/cli-service": "^5.0.8", |
|---|
| | | "@vue/compiler-sfc": "^3.0.0-0", |
|---|
| | | "babel-eslint": "^10.1.0", |
|---|
| | | "eslint": "^7.32.0", |
|---|
| | | "eslint-plugin-vue": "^8.7.1" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <section> |
|---|
| | | <header> |
|---|
| | | <h1>My friends</h1> |
|---|
| | | </header> |
|---|
| | | <ul> |
|---|
| | | <friend-contact |
|---|
| | | v-for="friend in friends" |
|---|
| | | :key="friend.id" |
|---|
| | | :id="friend.id" |
|---|
| | | :name="friend.name" |
|---|
| | | :phone-number="friend.phone" |
|---|
| | | :email-address="friend.email" |
|---|
| | | :is-favorite="friend.isFavorite" |
|---|
| | | @toggle-favorite="toggleFavoriteStatus" |
|---|
| | | ></friend-contact> |
|---|
| | | </ul> |
|---|
| | | </section> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | friends: [ |
|---|
| | | { |
|---|
| | | id: "manuel", |
|---|
| | | name: "Manuel Lorenz", |
|---|
| | | phone: "01234 5678 991", |
|---|
| | | email: "manuel@localhost.com", |
|---|
| | | isFavorite: true, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "julie", |
|---|
| | | name: "Julie Jones", |
|---|
| | | phone: "09876 543 221", |
|---|
| | | email: "julie@localhost.com", |
|---|
| | | isFavorite: true, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | toggleFavoriteStatus(friendId){ |
|---|
| | | const found = this.friends.find( |
|---|
| | | (friend) => friend.id === friendId |
|---|
| | | ); |
|---|
| | | found.isFavorite = !found.isFavorite; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap'); |
|---|
| | | |
|---|
| | | * { |
|---|
| | | 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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <li> |
|---|
| | | <h2>{{ name }} {{ isFavorite ? '(Favorite)' : '' }}</h2> |
|---|
| | | <button @click="toggleDetails"> |
|---|
| | | {{ detailsAreVisible ? 'Hide' : 'Show' }} Details |
|---|
| | | </button> |
|---|
| | | |
|---|
| | | <button @click="toggleFavorite"> |
|---|
| | | Toggle favorite |
|---|
| | | </button> |
|---|
| | | <ul v-if="detailsAreVisible"> |
|---|
| | | <li><strong>Phone:</strong> {{ phoneNumber }}</li> |
|---|
| | | <li><strong>Email:</strong> {{ emailAddress }}</li> |
|---|
| | | </ul> |
|---|
| | | </li> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | // props: [ |
|---|
| | | // 'name', |
|---|
| | | // 'phoneNumber', |
|---|
| | | // 'emailAddress', |
|---|
| | | // 'isFavorite' |
|---|
| | | // ], |
|---|
| | | props: { |
|---|
| | | id:{ |
|---|
| | | title: String, |
|---|
| | | required: true |
|---|
| | | }, |
|---|
| | | name: { |
|---|
| | | title: String, |
|---|
| | | required: true |
|---|
| | | }, |
|---|
| | | phoneNumber: { |
|---|
| | | title: String, |
|---|
| | | required: true |
|---|
| | | }, |
|---|
| | | emailAddress: { |
|---|
| | | title: String, |
|---|
| | | required: true |
|---|
| | | }, |
|---|
| | | isFavorite: { |
|---|
| | | title: Boolean, |
|---|
| | | required: false, |
|---|
| | | default: false, |
|---|
| | | // validator: function (value) { |
|---|
| | | // return value === '1' || value === '0'; |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | detailsAreVisible: false, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | toggleDetails() { |
|---|
| | | this.detailsAreVisible = !this.detailsAreVisible; |
|---|
| | | }, |
|---|
| | | toggleFavorite() { |
|---|
| | | // this.friendIsFavorite = !this.friendIsFavorite; |
|---|
| | | this.$emit('toggle-favorite', this.id); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| New file |
| | |
|---|
| | | 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"); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| | | not ie 11 |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | root: true, |
|---|
| | | env: { |
|---|
| | | node: true |
|---|
| | | }, |
|---|
| | | 'extends': [ |
|---|
| | | 'plugin:vue/vue3-essential', |
|---|
| | | 'eslint:recommended' |
|---|
| | | ], |
|---|
| | | parserOptions: { |
|---|
| | | parser: '@babel/eslint-parser' |
|---|
| | | }, |
|---|
| | | rules: { |
|---|
| | | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', |
|---|
| | | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | # vue-first-app |
|---|
| | | |
|---|
| | | ## Project setup |
|---|
| | | ``` |
|---|
| | | npm install |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Compiles and hot-reloads for development |
|---|
| | | ``` |
|---|
| | | npm run serve |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Compiles and minifies for production |
|---|
| | | ``` |
|---|
| | | npm run build |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Lints and fixes files |
|---|
| | | ``` |
|---|
| | | npm run lint |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Customize configuration |
|---|
| | | See [Configuration Reference](https://cli.vuejs.org/config/). |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "compilerOptions": { |
|---|
| | | "target": "es5", |
|---|
| | | "module": "esnext", |
|---|
| | | "baseUrl": "./", |
|---|
| | | "moduleResolution": "node", |
|---|
| | | "paths": { |
|---|
| | | "@/*": [ |
|---|
| | | "src/*" |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | "lib": [ |
|---|
| | | "esnext", |
|---|
| | | "dom", |
|---|
| | | "dom.iterable", |
|---|
| | | "scripthost" |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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.8.3", |
|---|
| | | "vue": "^3.2.13" |
|---|
| | | }, |
|---|
| | | "devDependencies": { |
|---|
| | | "@babel/core": "^7.12.16", |
|---|
| | | "@babel/eslint-parser": "^7.12.16", |
|---|
| | | "@vue/cli-plugin-babel": "~5.0.0", |
|---|
| | | "@vue/cli-plugin-eslint": "~5.0.0", |
|---|
| | | "@vue/cli-service": "~5.0.0", |
|---|
| | | "eslint": "^7.32.0", |
|---|
| | | "eslint-plugin-vue": "^8.0.3" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang=""> |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <img alt="Vue logo" src="./assets/logo.png"> |
|---|
| | | <HelloWorld msg="Welcome to Your Vue.js App"/> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import HelloWorld from './components/HelloWorld.vue' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'App', |
|---|
| | | components: { |
|---|
| | | HelloWorld |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #app { |
|---|
| | | font-family: Avenir, Helvetica, Arial, sans-serif; |
|---|
| | | -webkit-font-smoothing: antialiased; |
|---|
| | | -moz-osx-font-smoothing: grayscale; |
|---|
| | | text-align: center; |
|---|
| | | color: #2c3e50; |
|---|
| | | margin-top: 60px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="hello"> |
|---|
| | | <h1>{{ msg }}</h1> |
|---|
| | | <p> |
|---|
| | | For a guide and recipes on how to configure / customize this project,<br> |
|---|
| | | check out the |
|---|
| | | <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|---|
| | | </p> |
|---|
| | | <h3>Installed CLI Plugins</h3> |
|---|
| | | <ul> |
|---|
| | | <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|---|
| | | <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|---|
| | | </ul> |
|---|
| | | <h3>Essential Links</h3> |
|---|
| | | <ul> |
|---|
| | | <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|---|
| | | <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|---|
| | | <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|---|
| | | <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|---|
| | | <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|---|
| | | </ul> |
|---|
| | | <h3>Ecosystem</h3> |
|---|
| | | <ul> |
|---|
| | | <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|---|
| | | <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|---|
| | | <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|---|
| | | <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|---|
| | | <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'HelloWorld', |
|---|
| | | props: { |
|---|
| | | msg: String |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
|---|
| | | <style scoped> |
|---|
| | | h3 { |
|---|
| | | margin: 40px 0 0; |
|---|
| | | } |
|---|
| | | ul { |
|---|
| | | list-style-type: none; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | li { |
|---|
| | | display: inline-block; |
|---|
| | | margin: 0 10px; |
|---|
| | | } |
|---|
| | | a { |
|---|
| | | color: #42b983; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | import { createApp } from 'vue' |
|---|
| | | import App from './App.vue' |
|---|
| | | |
|---|
| | | createApp(App).mount('#app') |
|---|
| New file |
| | |
|---|
| | | const { defineConfig } = require('@vue/cli-service') |
|---|
| | | module.exports = defineConfig({ |
|---|
| | | transpileDependencies: true |
|---|
| | | }) |
|---|
