ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add nuxt.js to project

This commit is contained in:
Ramon Wenger 2018-08-08 15:00:56 +02:00
parent 93085a11a7
commit 5e6ea1f52e
12 changed files with 4868 additions and 2425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/index.html
View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>skillBox</title>
<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700" rel="stylesheet">
<style>
body{background:#fafafa;}.center{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.lds-dual-ring{display:inline-block;width:64px;height:64px}.lds-dual-ring:after{content:" ";display:block;width:46px;height:46px;margin:1px;border-radius:50%;border:5px solid #FD6E22;border-color:#FD6E22 transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
</style>
</head>
<body>
<div id="app">
<div class="center">
<div class="lds-dual-ring"></div>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>

29
client/nuxt.config.js Normal file
View File

@ -0,0 +1,29 @@
const webpack = require('webpack')
module.exports = {
build: {
plugins: [
new webpack.ProvidePlugin({
'_': 'lodash'
})
]
},
modules: ['@nuxtjs/apollo'],
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'http://localhost:8000/api/graphql/',
httpLinkOptions: {
credentials: 'same-origin'
},
}
}
},
plugins: [
'~plugins/vue-axios',
'~plugins/vue-vimeo-player',
'~plugins/vuetify'
],
srcDir: 'src/'
}

7139
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
client/package.json
View File

@ -5,12 +5,13 @@
"author": "maersu <me@maersu.ch>", "author": "maersu <me@maersu.ch>",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev": "nuxt --spa",
"start": "npm run dev", "start": "npm run dev",
"lint": "eslint --ext .js,.vue src", "lint": "eslint --ext .js,.vue src",
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"@nuxtjs/apollo": "^4.0.0-rc1",
"apollo-cache-inmemory": "^1.2.2", "apollo-cache-inmemory": "^1.2.2",
"apollo-client": "^2.3.2", "apollo-client": "^2.3.2",
"apollo-link-http": "^1.5.4", "apollo-link-http": "^1.5.4",
@ -24,6 +25,7 @@
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0", "babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.3.2", "babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0", "babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1", "chalk": "^2.0.1",
@ -47,6 +49,7 @@
"lodash": "^4.17.10", "lodash": "^4.17.10",
"node-notifier": "^5.1.2", "node-notifier": "^5.1.2",
"node-sass": "^4.9.0", "node-sass": "^4.9.0",
"nuxt": "^1.4.2",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0", "ora": "^1.2.0",
"portfinder": "^1.0.13", "portfinder": "^1.0.13",
@ -58,15 +61,16 @@
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1", "uglifyjs-webpack-plugin": "^1.1.1",
"unfetch": "^3.1.1",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"uuid": "^3.2.1", "uuid": "^3.2.1",
"vue": "^2.5.2", "vue": "^2.5.17",
"vue-apollo": "^3.0.0-beta.16", "vue-apollo": "^3.0.0-beta.16",
"vue-axios": "^2.1.1", "vue-axios": "^2.1.1",
"vue-loader": "^14.2.1", "vue-loader": "^14.2.1",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.17",
"vue-vimeo-player": "0.0.6", "vue-vimeo-player": "0.0.6",
"vuetify": "^1.1.8", "vuetify": "^1.1.8",
"vuex": "^3.0.1", "vuex": "^3.0.1",

11
client/src/graphql/gql/allModules.gql Normal file
View File

@ -0,0 +1,11 @@
{
modules {
edges {
node {
id
title
slug
}
}
}
}

15
client/src/main.js
View File

@ -1,25 +1,12 @@
import 'babel-polyfill' import 'babel-polyfill'
import Vue from 'vue' import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify'
import axios from 'axios'
import VueAxios from 'vue-axios'
import lodash from 'lodash'
import VueVimeoPlayer from 'vue-vimeo-player'
import apolloClient from './graphql/client' import apolloClient from './graphql/client'
import VueApollo from 'vue-apollo' import VueApollo from 'vue-apollo'
import App from './App' import App from './App'
import router from './router'
import store from '@/store/index'
Vue.config.productionTip = false Vue.config.productionTip = false
Object.defineProperty(Vue.prototype, '$lodash', { value: lodash })
Vue.use(VueApollo) Vue.use(VueApollo)
Vue.use(VueAxios, axios)
Vue.use(Vuetify)
Vue.use(VueVimeoPlayer)
const apolloProvider = new VueApollo({ const apolloProvider = new VueApollo({
defaultClient: apolloClient defaultClient: apolloClient
@ -28,8 +15,6 @@ const apolloProvider = new VueApollo({
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
store,
router,
provide: apolloProvider.provide(), provide: apolloProvider.provide(),
render: h => h(App) render: h => h(App)
}) })

25
client/src/pages/index.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div>
<h3>Modules</h3>
<div>
{{modules}}
</div>
</div>
</template>
<script>
import allModules from '~/graphql/gql/allModules'
export default {
apollo: {
modules: {
prefetch: true,
query: allModules
}
},
head: {
title: 'Modules with Apollo'
}
}
</script>

5
client/src/plugins/vue-axios.js Normal file
View File

@ -0,0 +1,5 @@
import axios from 'axios'
import VueAxios from 'vue-axios'
import Vue from 'vue'
Vue.use(VueAxios, axios)

4
client/src/plugins/vue-vimeo-player.js Normal file
View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import VueVimeoPlayer from 'vue-vimeo-player'
Vue.use(VueVimeoPlayer)

5
client/src/plugins/vuetify.js Normal file
View File

@ -0,0 +1,5 @@
import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify'
import Vue from 'vue'
Vue.use(Vuetify)

25
client/src/store/index.js
View File

@ -1,20 +1,21 @@
import Vuex from 'vuex' import Vuex from 'vuex'
import Vue from 'vue' import Vue from 'vue'
Vue.use(Vuex) const createStore = () => {
return new Vuex.Store({
modules: {},
export default new Vuex.Store({ state: {
modules: { userid: null,
}, username: null
},
state: { getters: {},
userid: null,
username: null
},
getters: {}, actions: {},
actions: {}, mutations: {}
})
}
mutations: {} export default createStore
})

1
server/core/settings.py
View File

@ -94,6 +94,7 @@ if DEBUG:
MIDDLEWARE += ['corsheaders.middleware.CorsMiddleware'] MIDDLEWARE += ['corsheaders.middleware.CorsMiddleware']
CORS_ORIGIN_WHITELIST = ( CORS_ORIGIN_WHITELIST = (
'localhost:8080', 'localhost:8080',
'localhost:3000',
) )
CORS_ALLOW_CREDENTIALS = True CORS_ALLOW_CREDENTIALS = True