androiddrew
/
vuejs_spa
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Broke out into .vue files and did a bunch of stupid shit to

Browse Source
master
AndroidDrew 7 years ago
parent fdacfdec9f
commit 11602a3761
7 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File

1
build/webpack.base.config.js
Unescape Escape View File

@ -36,6 +36,7 @@
options: { options: {
css: 'css-loader', css: 'css-loader',
'scss': 'css-loader|sass-loader' 'scss': 'css-loader|sass-loader'
// extractCSS: true //don't want to do this when doing server side rendering
} }
}, },
{ {

13
build/webpack.client.config.js
Unescape Escape View File

@ -1,8 +1,21 @@
const base = require('./webpack.base.config') const base = require('./webpack.base.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
//extends the base config object and include the new property plugins //extends the base config object and include the new property plugins
const config = Object.assign({}, base, { const config = Object.assign({}, base, {
plugins: base.plugins || [] plugins: base.plugins || []
}) })
// We are using this because base config will be used for server side rendering
// but we don't need to extractCSS in that process only in our dev process
config.module.rules
.filter(x => { return x.loader == 'vue-loader'})
.forEach( x=> x.options.extractCSS = true)
config.plugins.push(
// This plugin accepts the file in which we want to save our styles
new ExtractTextPlugin('assets/styles.css')
)
module.exports = config module.exports = config

1
index.html
Unescape Escape View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vuejs SPA</title> <title>Vuejs SPA</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
<link rel="stylesheet" href="/assets/styles.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
package.json
Unescape Escape View File

@ -29,6 +29,7 @@
"eslint-plugin-node": "^5.1.1", "eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0", "eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1", "eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.1", "node-sass": "^4.7.1",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"vue-loader": "^13.5.0", "vue-loader": "^13.5.0",

2
src/app.js
Unescape Escape View File

@ -7,7 +7,7 @@ const app = new Vue({
render: h => h(AppLayout) render: h => h(AppLayout)
// Because fucktards in javascript want to make everything fucking insane // Because fucktards in javascript want to make everything fucking insane
// we are going to use the "spread" // we are going to use the "spread"
// ...AppLayout // ...AppLayout //this part didn't work. I don't know why but
}) })
export { app } export { app }

19
src/theme/Category.vue
Unescape Escape View File

@ -1,20 +1,21 @@
<template> <template>
<div class="columns"> <div class="columns">
<div class="column is-one-third" v-for="(post, title) in posts" v-bind:key="post.id"> <div class="column is-one-third" v-for="(post, title) in posts" v-bind:key="post.id">
<div class="card"> <app-post>
<div class="card-content"> <h3 slot="title">{{ post.title }}</h3>
<h3>{{ post.title }}</h3> <span slot="content">{{ post.content }}</span>
{{ post.content }} <a slot="link" class="card-footer-item" :href="post.link" target="_blank">Read More</a>
</div> </app-post>
<footer class="card-footer">
<a class="card-footer-item" v-bind:href="post.link" target="_blank">Read More</a>
</footer>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Post from './Post.vue'
export default { export default {
components: {
'app-post': Post
},
// whey are we doing it like this?
data () { data () {
return { return {
posts: [ posts: [

30
src/theme/Post.vue
Unescape Escape View File

@ -0,0 +1,30 @@
<template>
<div class="card">
<div class="card-content">
<slot name="title"></slot>
<slot name="content"></slot>
</div>
<footer class="card-footer">
<slot name="link"></slot>
</footer>
</div>
</template>
<script>
export default {
props: ['post']
}
</script>
<style scoped>
.card {
padding-bottom: 40px;
height: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
</style>
Write Preview
Loading…
Cancel
Save