（23）打鸡儿教你Vue.js

npm run build

<template>
    <div>
        <p>标题</p>
        <input type="text" v-model="title">
        <p>内容</p>
        <input type="text" v-model="content">
        <div class="btn" @click="add()">添加</div>
    </div>
</template>

<script>
    import store from '@/store'
    export default {
        name: "Add",
        store,
        data () {
            return {
                title: '',
                content: ''
            }
        },
        methods: {
            add () {
                store.commit('addItem',{
                    title: this.title,
                    content: this.content
                })
                this.title = ''
                this.content = ''
                this.$router.push('/home/list')
            }
        }
    }
</script>

<style scoped>

</style>

Add.vue

<template>
    <div>
        <router-view />
        <ul class="footer">
            <li class="icons"><router-link :to="{name: 'list'}">新闻列表</router-link></li>
            <li class="icons"><router-link :to="{name: 'user'}">个人中心</router-link></li>
        </ul>
    </div>

</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped lang="scss">
li {
    list-style: none;
}
.footer {
    position: fixed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    left: 0;
    bottom: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
.icons {
    font-size: 16px;
    flex: 1;
    text-align: center;
    border-top: 1px solid #42b983;
    a {
        color: #42b983;
        display: block;
        &.active {
            color: #fff;
            background: #42b983;
        }
    }
}
</style>

Home.vue

<template>
    <div>info</div>
</template>

<script>
    export default {
        name: "Info"
    }
</script>

<style scoped>

</style>

Info.vue

<template>
    <div>
        <ul>
            <li v-for="(item, index) in pageLists" :key="index">
                {{item.title}}-{{item.content}}
            </li>
        </ul>
    </div>
</template>

<script>
    import store from '@/store'
    export default {
        name: "List",
        store,
        computed: {
            pageLists () {
                return store.state.lists
            }
        }
    }
</script>

<style scoped>

</style>

List.vue

<template>
    <div>
        <form action="" v-if="!isReg">
            <div>用户名：</div>
            <input type="text" v-model="name">
            <div>密码：</div>
            <input type="password" v-model="password">
            <div>
                <button type="button" @click="login()">登录</button>
                <button type="button" @click="reg()">注册</button>
            </div>
        </form>
        <form action="" v-else>
            <div>用户名：</div>
            <input type="text" v-model="name">
            <div>密码：</div>
            <input type="password" v-model="password">
            <div>再次输入密码：</div>
            <input type="password" v-model="repeat">
            <div>
                <button type="button" @click="addUser()">确定</button>
                <button type="button" @click="cancel()">取消</button>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data () {
            return {
                isReg: false,
                name: '',
                password: '',
                repeat: ''
            }
        },
        methods: {
            login () {
                if (localStorage.getItem("name") === this.name && localStorage.getItem("password") === this.password){
                    this.name = ''
                    this.password = ''
                    this.$router.push('/home/list')
                }else{
                    alert('用户名密码不正确')
                }
            },
            reg () {
                this.isReg = true
            },
            cancel () {
                this.isReg = false
            },
            addUser () {
                if (this.password === this.repeat){
                    localStorage.setItem('name', this.name)
                    localStorage.setItem('password', this.password)
                    this.name = ''
                    this.password = ''
                    this.isReg = false
                }else{
                    alert('两次密码输入不一致')
                }
            }
        }
    }
</script>

<style scoped>

</style>

Login.vue

<template>
    <div>user</div>
</template>

<script>
    export default {
        name: "User"
    }
</script>

<style scoped>

</style>

User.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
</style>

App.vue

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/Login.vue'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'list',
          name: 'list',
          component: () => import(/* webpackChunkName: "list" */ './views/List.vue')
        },
        {
          path: 'user',
          name: 'user',
          component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
        },
      ]
    },
    {
      path: '/add',
      name: 'add',
      component: () => import(/* webpackChunkName: "add" */ './views/Add.vue')
    }
    // {
    //   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')
    // }
  ]
})

router.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    lists: []
  },
  mutations: {
    addItem (state, value) {
      state.lists.push(value)
    }
  },
  actions: {

  }
})

store.js

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}