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

Jesus fucking christ it takes this much bullshit to use webpack ES6 and Vue

Browse Source
master
AndroidDrew 7 years ago
parent 716f6946a7
commit a915c4eef5
8 changed files with 68 additions and 19 deletions
Show Stats Download Patch File Download Diff File

14
.bablerc
Unescape Escape View File

@ -0,0 +1,14 @@
{
"presets": [
[
"es2015",
{
"modules": false
}
],
"stage-2"
],
"ignore": [
"node_modules/*"
]
}

3
.eslintrc.js
Unescape Escape View File

@ -1,5 +1,6 @@
module.exports = { module.exports = {
root: true, //sets this file as the parent scope for the rules root: true, //sets this file as the parent scope for the rules,
parser: 'babel-eslint',
parserOptions:{ parserOptions:{
sourceType: 'module' sourceType: 'module'
}, },

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

@ -15,19 +15,29 @@
//We do not want to use this in production because it //We do not want to use this in production because it
//instead we whatnt o make sure that all components are defined in *.vuejs //instead we whatnt o make sure that all components are defined in *.vuejs
//files, because they are pre-compiled //files, because they are pre-compiled
resolve: { // What the hell does resolve do? // this is only needed if you are not using the vue-template-compiler
alias:{ //resolve: { // What the hell does resolve do?
vue: 'vue/dist/vue.js' // alias:{
} // vue: 'vue/dist/vue.js'
}, // }
//},
module: { module: {
rules: [ rules: [
{ {
enforce: 'pre', //check source files before they are loader by other loaders enforce: 'pre', //check source files before they are loader by other loaders
test: /(\.js$)/, test: /(\.js$)|(\.vue$)/, //linting for both js and vue files
loader: 'eslint-loader', loader: 'eslint-loader',
exclude: /node_modules/ exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/, // This rule applies after the .vue files are transpiled to .js files through the vue loader
loader: 'babel-loader',
exclude: /node_modules/
} }
] ]
} }

4
index.html
Unescape Escape View File

@ -6,9 +6,7 @@
<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">
</head> </head>
<body> <body>
<div id="app"> <div id="app"></div>
{{ message }}
</div>
<script src="/assets/js/app.js"></script> <script src="/assets/js/app.js"></script>
</body> </body>
</html> </html>

9
package.json
Unescape Escape View File

@ -11,9 +11,14 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"express": "^4.16.2", "express": "^4.16.2",
"vue": "^2.5.5" "vue": "^2.5.6"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.5.0", "eslint": "^4.5.0",
"eslint-config-standard": "^10.2.1", "eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0", "eslint-loader": "^1.9.0",
@ -22,6 +27,8 @@
"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",
"vue-loader": "^13.5.0",
"vue-template-compiler": "^2.5.6",
"webpack": "^3.8.1", "webpack": "^3.8.1",
"webpack-dev-middleware": "^1.12.0", "webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.20.0" "webpack-hot-middleware": "^2.20.0"

8
src/app.js
Unescape Escape View File

@ -1,10 +1,10 @@
import Vue from 'vue' import Vue from 'vue'
import AppLayout from './theme/Layout.vue'
const app = new Vue({ const app = new Vue({
data: { // render is a Vuejs function that will return an elements
message: 'Hello Vue' // This is equivalent to template: '<app></app>'
}, render: h => h(AppLayout)
template: '<div id="app">{{ message }}</div>'
}) })
export { app } export { app }

4
src/client-entry.js
Unescape Escape View File

@ -2,7 +2,3 @@ import { app } from './app'
// We can use the $mount when we didn't specify the el property name // We can use the $mount when we didn't specify the el property name
app.$mount('#app') app.$mount('#app')
if (module.hot) {
module.hot.accept()
}

23
src/theme/Layout.vue
Unescape Escape View File

@ -0,0 +1,23 @@
<template>
<div id="app">
<nav class="nav has-shadow">
<div class="container">
<a href="/">
<img src="http://bit.ly/vue-img" alt="Vue SPA" />
</a>
</div>
</nav>
<section class="main-section section"></section>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
Follow us on
<a href="https://twitter.com/bstavroulakis" target="_blank">Twitter</a>
</div>
</div>
</footer>
</div>
</template>
<script>
export default {}
</script>
Write Preview
Loading…
Cancel
Save