1. add login page

This commit is contained in:
Jay 2018-08-12 00:36:08 +08:00
parent 6e05f70723
commit 06e2bfded6
14 changed files with 161 additions and 122 deletions

44
package-lock.json generated
View File

@ -2087,8 +2087,7 @@
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "http://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=",
"dev": true
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
},
"babel-loader": {
"version": "8.0.0-beta.4",
@ -2127,6 +2126,15 @@
"esutils": "2.0.2"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"requires": {
"core-js": "2.5.7",
"regenerator-runtime": "0.11.1"
}
},
"babylon": {
"version": "7.0.0-beta.47",
"resolved": "http://registry.npm.taobao.org/babylon/download/babylon-7.0.0-beta.47.tgz",
@ -3233,8 +3241,7 @@
"core-js": {
"version": "2.5.7",
"resolved": "http://registry.npm.taobao.org/core-js/download/core-js-2.5.7.tgz",
"integrity": "sha1-+XJgj/DOrWi4QaFqky0LGDeRgU4=",
"dev": true
"integrity": "sha1-+XJgj/DOrWi4QaFqky0LGDeRgU4="
},
"core-util-is": {
"version": "1.0.2",
@ -7269,6 +7276,11 @@
"topo": "3.0.0"
}
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-message": {
"version": "1.0.5",
"resolved": "http://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz",
@ -7604,8 +7616,7 @@
"lodash": {
"version": "4.17.10",
"resolved": "http://registry.npm.taobao.org/lodash/download/lodash-4.17.10.tgz",
"integrity": "sha1-G3eTz3JZ6jj7NmHU04syYK+K5Oc=",
"dev": true
"integrity": "sha1-G3eTz3JZ6jj7NmHU04syYK+K5Oc="
},
"lodash.camelcase": {
"version": "4.3.0",
@ -10242,8 +10253,7 @@
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
"integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=",
"dev": true
"integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
},
"regenerator-transform": {
"version": "0.12.4",
@ -10681,6 +10691,24 @@
"node-forge": "0.7.5"
}
},
"semantic-ui-css": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.3.3.tgz",
"integrity": "sha512-/UDs+a07LdxmYgVNqkbW9x5Gil1Dt4HnVq4LrHKKUAD/DUDh0fnwmCxbQFyKKD+YsVDQWFqftyVbYKlClBFLDw==",
"requires": {
"jquery": "3.3.1"
}
},
"semantic-ui-vue": {
"version": "0.2.11",
"resolved": "https://registry.npmjs.org/semantic-ui-vue/-/semantic-ui-vue-0.2.11.tgz",
"integrity": "sha512-YlkWFP3q5Mp0ZzvI85llg1ih4gIx6balNYN0F+2xNZHfMPRt1+CVgq1X1JN4xRZ1bz2iPPGk0LCB5HIJq0mzFw==",
"requires": {
"babel-helper-vue-jsx-merge-props": "2.0.3",
"babel-runtime": "6.26.0",
"lodash": "4.17.10"
}
},
"semver": {
"version": "5.5.0",
"resolved": "http://registry.npm.taobao.org/semver/download/semver-5.5.0.tgz",

View File

@ -8,6 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"semantic-ui-css": "^2.3.3",
"semantic-ui-vue": "^0.2.11",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"

View File

@ -1,29 +1,28 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<Loading />
</div>
</template>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
<script>
import Loading from '@/components/Loading'
export default {
name: 'root-view',
components: {
Loading
}
}
</script>
<style lang="less">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
height: 100%;
background-color: #eee;
}
</style>

View File

@ -1,58 +1,5 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
<sui-container>
hello world
</sui-container>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@ -0,0 +1,18 @@
<template>
<sui-dimmer :active="getLoading">
<sui-loader>Loading...</sui-loader>
</sui-dimmer>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapGetters(['getLoading'])
}
}
</script>

View File

@ -0,0 +1,61 @@
<template>
<sui-container>
<div class="login-form">
<sui-header textAlign='center' color='teal'>OPay Donate</sui-header>
<sui-segment>
<sui-form @submit.prevent="login">
<sui-form-field>
<input placeholder="Account" v-model="account">
</sui-form-field>
<sui-form-field>
<input placeholder="Password" v-model="password">
</sui-form-field>
<sui-button type="submit" fluid color='teal'>Login</sui-button>
</sui-form>
</sui-segment>
<sui-message>
<div class="oauth">
or login with <a href="#">twitch</a> ?
</div>
</sui-message>
</div>
</sui-container>
</template>
<style lang="less" scoped>
.login-form {
max-width: 450px;
margin: 0 auto;
padding-top: 100px;
.oauth {
text-align: center;
}
}
</style>
<script>
import {mapMutations} from 'vuex'
export default {
name: 'LoginForm',
data () {
return {
account: '',
password: ''
}
},
methods: {
...mapMutations(['toggleLoading']),
login: function () {
console.log('login submit')
this.toggleLoading(1)
setTimeout(() => {
this.toggleLoading(0)
}, 1000)
}
},
mounted: function () {
}
}
</script>

View File

@ -2,6 +2,10 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import SuiVue from 'semantic-ui-vue'
import 'semantic-ui-css/semantic.min.css'
Vue.use(SuiVue)
Vue.config.productionTip = false

View File

@ -1,6 +1,7 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
// import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
Vue.use(Router)
@ -10,16 +11,8 @@ export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
name: 'Login',
component: Login
}
]
})

1
src/store/getters.js Normal file
View File

@ -0,0 +1 @@
export const getLoading = state => !!state.loading

View File

@ -1,15 +1,16 @@
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import * as getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
loading: false
},
mutations,
getters,
actions: {
}

View File

@ -0,0 +1,5 @@
export default {
toggleLoading (state, loading = null) {
state.loading = !!loading
}
}

View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

View File

@ -1,18 +0,0 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>

3
vue.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
baseUrl: process.env.BASE_URL || '/'
}