Browse Source

vuetify

new-map
Ben Stähli 3 years ago
parent
commit
a0359dab25
  1. 11
      babel.config.js
  2. 11
      package.json
  3. 20
      src/App-orig.vue
  4. 104
      src/App.vue
  5. BIN
      src/assets/logo.png
  6. 58
      src/components/HelloWorld-orig.vue
  7. 4
      src/main.js
  8. 7
      src/plugins/vuetify.js
  9. 45
      src/views/Home.vue
  10. 25
      yarn.lock

11
babel.config.js

@ -1,5 +1,10 @@
module.exports = {
presets: [
'@vue/app'
"presets": [
[
"@vue/app",
{
"useBuiltIns": "entry"
}
]
]
}
}

11
package.json

@ -8,13 +8,18 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@babel/polyfill": "^7.0.0-rc.1",
"material-design-icons-iconfont": "^3.0.3",
"roboto-fontface": "*",
"vue": "^2.5.17",
"vue-router": "^3.0.1"
"vue-router": "^3.0.1",
"vuetify": "^1.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.5",
"@vue/cli-plugin-eslint": "^3.0.5",
"@vue/cli-service": "^3.0.5",
"vue-cli-plugin-vuetify": "^0.2.1",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
@ -39,6 +44,6 @@
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
"not ie <= 10"
]
}
}

20
src/App-orig.vue

@ -0,0 +1,20 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<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>

104
src/App.vue

@ -1,20 +1,92 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
<v-app>
<v-navigation-drawer
persistent
:mini-variant="miniVariant"
:clipped="clipped"
v-model="drawer"
enable-resize-watcher
fixed
app
>
<v-list>
<v-list-tile
value="true"
v-for="(item, i) in items"
:key="i"
>
<v-list-tile-action>
<v-icon v-html="item.icon"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
app
:clipped-left="clipped"
>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-btn icon @click.stop="miniVariant = !miniVariant">
<v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
</v-btn>
<v-btn icon @click.stop="clipped = !clipped">
<v-icon>web</v-icon>
</v-btn>
<v-btn icon @click.stop="fixed = !fixed">
<v-icon>web</v-icon>
</v-btn>
<v-toolbar-title v-text="title"></v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
<v-icon>menu</v-icon>
</v-btn>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
<v-navigation-drawer
temporary
:right="right"
v-model="rightDrawer"
fixed
app
>
<v-list>
<v-list-tile @click="right = !right">
<v-list-tile-action>
<v-icon>compare_arrows</v-icon>
</v-list-tile-action>
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-footer :fixed="fixed" app>
<span>&copy; 2017</span>
</v-footer>
</v-app>
</template>
<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;
<script>
export default {
name: 'App',
data () {
return {
clipped: false,
drawer: true,
fixed: false,
items: [{
icon: 'bubble_chart',
title: 'Inspire'
}],
miniVariant: false,
right: true,
rightDrawer: false,
title: 'Vuetify.js'
}
}
}
</style>
</script>

BIN
src/assets/logo.png

Before

Width: 200  |  Height: 200  |  Size: 6.7 KiB

After

Width: 120  |  Height: 120  |  Size: 5.5 KiB

58
src/components/HelloWorld-orig.vue

@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For 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>

4
src/main.js

@ -1,6 +1,10 @@
import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.config.productionTip = false

7
src/plugins/vuetify.js

@ -0,0 +1,7 @@
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify, {
iconfont: 'md',
})

45
src/views/Home.vue

@ -1,18 +1,35 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<v-container fluid>
<v-slide-y-transition mode="out-in">
<v-layout column align-center>
<img src="@/assets/logo.png" alt="Vuetify.js" class="mb-5">
<blockquote>
&#8220;First, solve the problem. Then, write the code.&#8221;
<footer>
<small>
<em>&mdash;John Johnson</em>
</small>
</footer>
</blockquote>
</v-layout>
</v-slide-y-transition>
</v-container>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</script>
</style>

25
yarn.lock

@ -519,6 +519,13 @@
"@babel/helper-regex" "7.0.0-beta.47"
regexpu-core "^4.1.3"
"@babel/polyfill@^7.0.0-rc.1":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.0.0.tgz#c8ff65c9ec3be6a1ba10113ebd40e8750fb90bff"
dependencies:
core-js "^2.5.7"
regenerator-runtime "^0.11.1"
"@babel/preset-env@7.0.0-beta.47":
version "7.0.0-beta.47"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.0.0-beta.47.tgz#a3dab3b5fac4de56e3510bdbcb528f1cbdedbe2d"
@ -1841,7 +1848,7 @@ copy-webpack-plugin@^4.5.2:
p-limit "^1.0.0"
serialize-javascript "^1.4.0"
core-js@^2.5.3:
core-js@^2.5.3, core-js@^2.5.7:
version "2.5.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@ -4023,6 +4030,10 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
material-design-icons-iconfont@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-3.0.3.tgz#154a1084047d4e27237fa7f5a37e1075ceea6df2"
math-random@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@ -5523,6 +5534,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
hash-base "^3.0.0"
inherits "^2.0.1"
roboto-fontface@*:
version "0.10.0"
resolved "https://registry.yarnpkg.com/roboto-fontface/-/roboto-fontface-0.10.0.tgz#7eee40cfa18b1f7e4e605eaf1a2740afb6fd71b0"
run-async@^2.2.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@ -6386,6 +6401,10 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
vue-cli-plugin-vuetify@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-0.2.1.tgz#fea624e5e4cf3cc2e655d469d441ec151fbb2c23"
vue-eslint-parser@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@ -6437,6 +6456,10 @@ vue@^2.5.17:
version "2.5.17"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
vuetify@^1.2.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.3.0.tgz#7f30641ae906f88728dea21da689d02b0a297f41"
watchpack@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"

Loading…
Cancel
Save