Hello World Vue App

This commit is contained in:
Johannes Zillmann 2016-11-11 19:47:20 +01:00
commit 494899c7d2
9 changed files with 201 additions and 0 deletions

4
.babelrc Normal file
View File

@ -0,0 +1,4 @@
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
dist/

34
package.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "pdf-to-markdown",
"version": "0.0.1",
"description": "A PDF to Markdown converter",
"main": "main.js",
"scripts": {
"watch": "webpack -d --watch",
"build": "webpack"
},
"keywords": [
"PDF",
"Markdown",
"Converter"
],
"author": "Johannes Zillmann",
"license": "ISC",
"dependencies": {
"vue": "^2.0.5"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.7",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"url-loader": "^0.5.7",
"vue-loader": "^9.8.1",
"webpack": "^1.13.3"
}
}

28
src/App.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</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>

BIN
src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

53
src/components/Hello.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your!! Vue.js App'
}
}
}
</script>
<!-- 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;
}
</style>

11
src/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF to Markdown</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

11
src/main.js Normal file
View File

@ -0,0 +1,11 @@
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})

58
webpack.config.js Normal file
View File

@ -0,0 +1,58 @@
var path = require('path')
var sourceDir = path.resolve(__dirname, 'src');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
// To the `dist` folder
path: './dist',
// With the filename `build.js` so it's dist/build.js
filename: 'build.js'
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
// Special compilation rules
loaders: [
{
// Ask webpack to check: If this file ends with .js, then apply some transforms
test: /\.js$/,
// Transform it with babel
loader: 'babel',
// don't transform node_modules folder (which don't need to be compiled)
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
]
},
vue: {
loaders: {
js: 'babel'
}
},
plugins: [
new HtmlWebpackPlugin({
template: sourceDir + '/index.html'
})
]
}