| 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" |
|---|
| | | }, |
|---|
| | | "prettier": { |
|---|
| | | "singleQuote": true |
|---|
| | | } |
|---|
| | | } |
|---|
| 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> |
|---|
| | | <active-element |
|---|
| | | :topic-title="activeTopic && activeTopic.title" |
|---|
| | | :text="activeTopic && activeTopic.fullText" |
|---|
| | | ></active-element> |
|---|
| | | <knowledge-base :topics="topics" @select-topic="activateTopic"></knowledge-base> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | topics: [ |
|---|
| | | { |
|---|
| | | id: 'basics', |
|---|
| | | title: 'The Basics', |
|---|
| | | description: 'Core Vue basics you have to know', |
|---|
| | | fullText: |
|---|
| | | 'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'components', |
|---|
| | | title: 'Components', |
|---|
| | | description: |
|---|
| | | 'Components are a core concept for building Vue UIs and apps', |
|---|
| | | fullText: |
|---|
| | | 'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | activeTopic: null, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | activateTopic(topicId) { |
|---|
| | | this.activeTopic = this.topics.find((topic) => topic.id === topicId); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | * { |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | html { |
|---|
| | | font-family: sans-serif; |
|---|
| | | } |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | section { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | margin: 2rem auto; |
|---|
| | | max-width: 40rem; |
|---|
| | | padding: 1rem; |
|---|
| | | border-radius: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ul { |
|---|
| | | list-style: none; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | li { |
|---|
| | | border-radius: 12px; |
|---|
| | | border: 1px solid #ccc; |
|---|
| | | padding: 1rem; |
|---|
| | | width: 15rem; |
|---|
| | | margin: 0 1rem; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | |
|---|
| | | h2 { |
|---|
| | | margin: 0.75rem 0; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button { |
|---|
| | | font: inherit; |
|---|
| | | border: 1px solid #c70053; |
|---|
| | | background-color: #c70053; |
|---|
| | | color: white; |
|---|
| | | padding: 0.75rem 2rem; |
|---|
| | | border-radius: 30px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:hover, |
|---|
| | | button:active { |
|---|
| | | background-color: #e24d8b; |
|---|
| | | border-color: #e24d8b; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <section> |
|---|
| | | <h2>{{ topicTitle }}</h2> |
|---|
| | | <p>{{ text }}</p> |
|---|
| | | </section> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ['topicTitle', 'text'], |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <section> |
|---|
| | | <h2>Select a Topic</h2> |
|---|
| | | <knowledge-grid :topics="topics" @select-topic="$emit('select-topic', $event)"></knowledge-grid> |
|---|
| | | </section> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ['topics'], |
|---|
| | | emits: ['select-topic'], |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <li> |
|---|
| | | <h3>{{ topicName }}</h3> |
|---|
| | | <p>{{ description }}</p> |
|---|
| | | <button @click="$emit('select-topic', id)">Learn More</button> |
|---|
| | | </li> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ['id', 'topicName', 'description'], |
|---|
| | | emits: ['select-topic'], |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <ul> |
|---|
| | | <knowledge-element |
|---|
| | | v-for="topic in topics" |
|---|
| | | :key="topic.id" |
|---|
| | | :id="topic.id" |
|---|
| | | :topic-name="topic.title" |
|---|
| | | :description="topic.description" |
|---|
| | | @select-topic="$emit('select-topic', $event)" |
|---|
| | | ></knowledge-element> |
|---|
| | | </ul> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ['topics'], |
|---|
| | | emits: ['select-topic'] |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| New file |
| | |
|---|
| | | import { createApp } from 'vue'; |
|---|
| | | |
|---|
| | | import App from './App.vue'; |
|---|
| | | import ActiveElement from './components/ActiveElement.vue'; |
|---|
| | | import KnowledgeBase from './components/KnowledgeBase.vue'; |
|---|
| | | import KnowledgeElement from './components/KnowledgeElement.vue'; |
|---|
| | | import KnowledgeGrid from './components/KnowledgeGrid.vue'; |
|---|
| | | |
|---|
| | | const app = createApp(App); |
|---|
| | | |
|---|
| | | app.component('active-element', ActiveElement); |
|---|
| | | app.component('knowledge-base', KnowledgeBase); |
|---|
| | | app.component('knowledge-element', KnowledgeElement); |
|---|
| | | app.component('knowledge-grid', KnowledgeGrid); |
|---|
| | | |
|---|
| | | app.mount('#app'); |
|---|
