| 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": "~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" |
|---|
| | | } |
|---|
| | | } |
|---|
| 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> |
|---|
| | | <div> |
|---|
| | | <the-header></the-header> |
|---|
| | | <badge-list></badge-list> |
|---|
| | | <user-info |
|---|
| | | :full-name="activeUser.name" |
|---|
| | | :info-text="activeUser.description" |
|---|
| | | :role="activeUser.role" |
|---|
| | | ></user-info> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | activeUser: { |
|---|
| | | name: 'Maximilian Schwarzmüller', |
|---|
| | | description: 'Site owner and admin', |
|---|
| | | role: 'admin', |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | html { |
|---|
| | | font-family: sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <section> |
|---|
| | | <h2>Available Badges</h2> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <base-badge type="admin" caption="ADMIN"></base-badge> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <base-badge type="author" caption="AUTHOR"></base-badge> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </section> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | section h2 { |
|---|
| | | margin: 0.5rem 0; |
|---|
| | | color: #3a3a3a; |
|---|
| | | } |
|---|
| | | ul { |
|---|
| | | list-style: none; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | } |
|---|
| | | |
|---|
| | | li { |
|---|
| | | margin-right: 1rem; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <span class="badge" :class="classes">{{ caption }}</span> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ['type', 'caption'], |
|---|
| | | computed: { |
|---|
| | | classes() { |
|---|
| | | return { |
|---|
| | | 'badge--admin': this.type === 'admin', |
|---|
| | | 'badge--author': this.type === 'author', |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | .badge { |
|---|
| | | display: inline-block; |
|---|
| | | padding: 0.5rem 1rem; |
|---|
| | | border-radius: 30px; |
|---|
| | | background-color: #ccc; |
|---|
| | | color: #2e2e2e; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .badge--admin { |
|---|
| | | background-color: #810036; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .badge--author { |
|---|
| | | background-color: #002c8a; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <header> |
|---|
| | | <h1>More on Vue Components</h1> |
|---|
| | | </header> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | header { |
|---|
| | | width: 100%; |
|---|
| | | height: 5rem; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | background-color: #14005e; |
|---|
| | | } |
|---|
| | | |
|---|
| | | header h1 { |
|---|
| | | color: white; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <section> |
|---|
| | | <div> |
|---|
| | | <h3>{{ fullName }}</h3> |
|---|
| | | <base-badge :type="role" :caption="role.toUpperCase()"></base-badge> |
|---|
| | | </div> |
|---|
| | | <p>{{ infoText }}</p> |
|---|
| | | </section> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ['fullName', 'infoText', 'role'], |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | section { |
|---|
| | | margin: 2rem auto; |
|---|
| | | max-width: 30rem; |
|---|
| | | border-radius: 12px; |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | padding: 1rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | section div { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | import { createApp } from 'vue'; |
|---|
| | | |
|---|
| | | import App from './App.vue'; |
|---|
| | | import TheHeader from './components/TheHeader.vue'; |
|---|
| | | import BaseBadge from './components/BaseBadge.vue'; |
|---|
| | | import BadgeList from './components/BadgeList.vue'; |
|---|
| | | import UserInfo from './components/UserInfo.vue'; |
|---|
| | | |
|---|
| | | const app = createApp(App); |
|---|
| | | |
|---|
| | | app.component('the-header', TheHeader); |
|---|
| | | app.component('base-badge', BaseBadge); |
|---|
| | | app.component('badge-list', BadgeList); |
|---|
| | | app.component('user-info', UserInfo); |
|---|
| | | |
|---|
| | | app.mount('#app'); |
|---|
