add an lesson about axios
This commit is contained in:
Andreas Zweili
parent
8217fd60e2
commit
3e3fd51981
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", { "modules": false }]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# vue-update
|
||||
|
||||
> Vue Auth & more
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>vue-update</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "vue-update",
|
||||
"description": "Vue Auth & more",
|
||||
"version": "1.0.0",
|
||||
"author": "Maximilian Schwarzmüller <business@academind.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"vue": "^2.4.4",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.7",
|
||||
"file-loader": "^1.1.4",
|
||||
"vue-loader": "^13.0.5",
|
||||
"vue-template-compiler": "^2.4.4",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.9.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<app-header />
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './components/header/header.vue'
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
'app-header': Header
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div id="signin">
|
||||
<div class="signin-form">
|
||||
<form @submit.prevent="onSubmit">
|
||||
<div class="input">
|
||||
<label for="email">Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
v-model="email">
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="password">
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
email: '',
|
||||
password: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit () {
|
||||
const formData = {
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
}
|
||||
console.log(formData)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signin-form {
|
||||
width: 400px;
|
||||
margin: 30px auto;
|
||||
border: 1px solid #eee;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 3px #ccc;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input label {
|
||||
display: block;
|
||||
color: #4e4e4e;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.input input {
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.input input:focus {
|
||||
outline: none;
|
||||
border: 1px solid #521751;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.submit button {
|
||||
border: 1px solid #521751;
|
||||
color: #521751;
|
||||
padding: 10px 20px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit button:hover,
|
||||
.submit button:active {
|
||||
background-color: #521751;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.submit button[disabled],
|
||||
.submit button[disabled]:hover,
|
||||
.submit button[disabled]:active {
|
||||
border: 1px solid #ccc;
|
||||
background-color: transparent;
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<div id="signup">
|
||||
<div class="signup-form">
|
||||
<form @submit.prevent="onSubmit">
|
||||
<div class="input">
|
||||
<label for="email">Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
v-model="email">
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="age">Your Age</label>
|
||||
<input
|
||||
type="number"
|
||||
id="age"
|
||||
v-model.number="age">
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="password">
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="confirm-password">Confirm Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword">
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="country">Country</label>
|
||||
<select id="country" v-model="country">
|
||||
<option value="usa">USA</option>
|
||||
<option value="india">India</option>
|
||||
<option value="uk">UK</option>
|
||||
<option value="germany">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="hobbies">
|
||||
<h3>Add some Hobbies</h3>
|
||||
<button @click="onAddHobby" type="button">Add Hobby</button>
|
||||
<div class="hobby-list">
|
||||
<div
|
||||
class="input"
|
||||
v-for="(hobbyInput, index) in hobbyInputs"
|
||||
:key="hobbyInput.id">
|
||||
<label :for="hobbyInput.id">Hobby #{{ index }}</label>
|
||||
<input
|
||||
type="text"
|
||||
:id="hobbyInput.id"
|
||||
v-model="hobbyInput.value">
|
||||
<button @click="onDeleteHobby(hobbyInput.id)" type="button">X</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input inline">
|
||||
<input type="checkbox" id="terms" v-model="terms">
|
||||
<label for="terms">Accept Terms of Use</label>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
email: '',
|
||||
age: null,
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
country: 'usa',
|
||||
hobbyInputs: [],
|
||||
terms: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onAddHobby () {
|
||||
const newHobby = {
|
||||
id: Math.random() * Math.random() * 1000,
|
||||
value: ''
|
||||
}
|
||||
this.hobbyInputs.push(newHobby)
|
||||
},
|
||||
onDeleteHobby (id) {
|
||||
this.hobbyInputs = this.hobbyInputs.filter(hobby => hobby.id !== id)
|
||||
},
|
||||
onSubmit () {
|
||||
const formData = {
|
||||
email: this.email,
|
||||
age: this.age,
|
||||
password: this.password,
|
||||
confirmPassword: this.confirmPassword,
|
||||
country: this.country,
|
||||
hobbies: this.hobbyInputs.map(hobby => hobby.value),
|
||||
terms: this.terms
|
||||
}
|
||||
console.log(formData)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signup-form {
|
||||
width: 400px;
|
||||
margin: 30px auto;
|
||||
border: 1px solid #eee;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 3px #ccc;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.input label {
|
||||
display: block;
|
||||
color: #4e4e4e;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.input.inline label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.input input {
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.input.inline input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.input input:focus {
|
||||
outline: none;
|
||||
border: 1px solid #521751;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.input select {
|
||||
border: 1px solid #ccc;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.hobbies button {
|
||||
border: 1px solid #521751;
|
||||
background: #521751;
|
||||
color: white;
|
||||
padding: 6px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hobbies button:hover,
|
||||
.hobbies button:active {
|
||||
background-color: #8d4288;
|
||||
}
|
||||
|
||||
.hobbies input {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.submit button {
|
||||
border: 1px solid #521751;
|
||||
color: #521751;
|
||||
padding: 10px 20px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit button:hover,
|
||||
.submit button:active {
|
||||
background-color: #521751;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.submit button[disabled],
|
||||
.submit button[disabled]:hover,
|
||||
.submit button[disabled]:active {
|
||||
border: 1px solid #ccc;
|
||||
background-color: transparent;
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div id="dashboard">
|
||||
<h1>That's the dashboard!</h1>
|
||||
<p>You should only get here if you're authenticated!</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<header id="header">
|
||||
<div class="logo">
|
||||
<router-link to="/">Vue - Complete Guide</router-link>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link to="/signup">Sign Up</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/signin">Sign In</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/dashboard">Dashboard</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#header {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #521751;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
li a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
li a:hover,
|
||||
li a:active,
|
||||
li a.router-link-active {
|
||||
color: #fa923f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<div id="welcome">
|
||||
<h1>Time to learn something new!</h1>
|
||||
<p>You found the best place to learn - and now you're just one sign in (or sign up) away from it!</p>
|
||||
<div class="cta">
|
||||
<router-link to="/signup">Sign Up</router-link>
|
||||
<router-link to="/signin">Sign In</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#welcome {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta {
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta a {
|
||||
margin: 10px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border: 1px solid #521751;
|
||||
border-radius: 3px;
|
||||
width: 100px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
color: #521751;
|
||||
}
|
||||
|
||||
.cta a:hover,
|
||||
.cta a:active {
|
||||
background-color: #521751;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import WelcomePage from './components/welcome/welcome.vue'
|
||||
import DashboardPage from './components/dashboard/dashboard.vue'
|
||||
import SignupPage from './components/auth/signup.vue'
|
||||
import SigninPage from './components/auth/signin.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: WelcomePage },
|
||||
{ path: '/signup', component: SignupPage },
|
||||
{ path: '/signin', component: SigninPage },
|
||||
{ path: '/dashboard', component: DashboardPage }
|
||||
]
|
||||
|
||||
export default new VueRouter({mode: 'history', routes})
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
|
||||
},
|
||||
mutations: {
|
||||
|
||||
},
|
||||
actions: {
|
||||
|
||||
},
|
||||
getters: {
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
}
|
||||
// other vue-loader options go here
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
overlay: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map'
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
])
|
||||
}
|
||||
Reference in New Issue