Basic setup for Vue app

This commit is contained in:
Yukai Huang 2016-12-24 11:50:57 +08:00
parent a06fad974e
commit 99dd107724
7 changed files with 56 additions and 1 deletions

View file

@ -7,6 +7,10 @@ indent_size = 4
trim_trailing_whitespace = true trim_trailing_whitespace = true
insert_final_newline = true insert_final_newline = true
[*.vue]
indent_style = space
indent_size = 2
[*.md] [*.md]
trim_trailing_whitespace = false trim_trailing_whitespace = false

View file

@ -116,6 +116,7 @@
"visibilityjs": "^1.2.4", "visibilityjs": "^1.2.4",
"viz.js": "^1.4.1", "viz.js": "^1.4.1",
"vue": "^2.1.6", "vue": "^2.1.6",
"vue-loader": "^10.0.2",
"winston": "^2.3.0", "winston": "^2.3.0",
"xss": "^0.3.2" "xss": "^0.3.2"
}, },
@ -162,6 +163,7 @@
"script-loader": "^0.7.0", "script-loader": "^0.7.0",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"vue-template-compiler": "^2.1.6",
"webpack": "^1.14.0" "webpack": "^1.14.0"
} }
} }

View file

@ -0,0 +1,21 @@
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
message: 'Hello Vue'
}
}
}
</script>
<style scoped>
h1 {
color: blue;
}
</style>

View file

@ -28,8 +28,14 @@ var saveAs = require('file-saver').saveAs;
var List = require('list.js'); var List = require('list.js');
var S = require('string'); var S = require('string');
import Cover from './views/Cover';
import Vue from 'vue'; import Vue from 'vue';
new Vue({
el: '#cover-app',
render: (h) => h(Cover)
})
var options = { var options = {
valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'], valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'],
item: '<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">\ item: '<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">\

15
public/js/views/Cover.vue Normal file
View file

@ -0,0 +1,15 @@
<template>
<hello-world />
</template>
<script>
import HelloWorld from '../components/HelloWorld';
export default {
name: 'Cover',
components: {
HelloWorld
}
}
</script>

View file

@ -30,6 +30,7 @@
<div class="site-wrapper"> <div class="site-wrapper">
<div class="site-wrapper-inner"> <div class="site-wrapper-inner">
<div class="cover-container"> <div class="cover-container">
<div id="cover-app"></div>
<div class="masthead clearfix"> <div class="masthead clearfix">
<div class="inner"> <div class="inner">

View file

@ -338,7 +338,7 @@ module.exports = {
path.resolve(__dirname, 'src'), path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules') path.resolve(__dirname, 'node_modules')
], ],
extensions: ["", ".js"], extensions: ["", ".js", ".vue"],
alias: { alias: {
codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'), codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'),
inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'), inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
@ -372,6 +372,12 @@ module.exports = {
loaders: [{ loaders: [{
test: /\.json$/, test: /\.json$/,
loader: 'json-loader' loader: 'json-loader'
}, {
test: /\.vue$/,
loader: 'vue',
options: {
// vue-loader options go here
}
}, { }, {
test: /\.js$/, test: /\.js$/,
loader: 'babel', loader: 'babel',