vue入门级练手项目

image.png

大致知道自己需要的页面后，开始配置路由

src/router/index.js:

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

Vue.use(Router)

export default new Router({
  linkActiveClass:'active',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      //嵌套路由
      children:[
        {
          path:'list',
          name:'list',
          component:() => import('../views/List.vue')
        },
        {
          path:'user',
          name:'user',
          component:() => import('../views/User.vue')
        }
      ]
    },
    {
      path:'/add',
      name:'add',
      component:() => import('../views/Add.vue')
    }
  ]
})

image.png

主页按钮跳转使用到router-link:

image.png
image.png

Home.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;
  }
</style>

接下来是添加文章的页面：

Add.vue:

<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>

个人中心

User.vue:

<template>
  <div>
    <router-link :to="{name:'add'}">添加</router-link>
    <div>user</div>
  </div>
</template>

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

<style scoped>
</style>

登录页面：

Login.vue:

<template>
  <div>
    <form 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  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">
      <button type="button" @click="addUser()">确定</button>
      <button type="button" @click="cancel()">取消</button>
    </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>

新闻列表展示：

List.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>

vuex操作：

store.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:{

  }
})

当style中用了lang="scss"时，出现Can't resolve 'sass-loader' in...错误的解决办法

npm install sass-loader node-sass webpack --save-dev
npm install style-loader css-loader --save-dev
在web pack.base.conf.js 里面加
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
}