Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】

實戰項目源碼【鏈接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA? ?提取碼：n6ol】

目? ?錄

?1、用戶個人中心頁面

user.vue

user.css

2、用戶登錄頁面

login.vue

login.css

3、用戶登錄判斷

index.js

4、將項目打包部署到服務器上

5、項目匯報（項目功能描述）

6、實訓心得

---

?1、用戶個人中心頁面

user.vue

<template><div class="user"><!-- 頭部 --><div class="header"><div class="lt" @click="$router.go(-1)"><i class="iconfont icon-fanhui"></i></div><h3>我的美團</h3><div class="rt"><router-link to="/"><i class="iconfont icon-shouye1"></i></router-link><router-link to="/"><i class="iconfont icon-fangdajing"></i></router-link></div></div><!-- 個人信息 --><div class="userinfo"><img src="../../static/imgs/avatar.png" alt /><div class="txt"><h3><span>用戶名、昵稱</span><img src alt /></h3><p>賬戶余額:<span>0</span>元</p></div><router-link to="/"><i class="iconfont icon-xiangyou"></i></router-link></div><!-- 下面的信息 --><router-link to class="item"><i class="iconfont icon-caidan- c1 img"></i><h4>全部訂單</h4><span><i class="iconfont icon-xiangyou"></i></span></router-link><ul class="order-info"><li><router-link to><i class="num">1</i><i class="iconfont icon-daifukuan"></i><p>待付款</p></router-link></li><li><router-link to><i class="iconfont icon-daishiyong"></i><p>待使用</p></router-link></li><li><router-link to><i class="num">5</i><i class="iconfont icon-daipingjia"></i><p>待評價</p></router-link></li><li><router-link to><i class="iconfont icon-tuikuanshouhou"></i><p>退款/售后</p></router-link></li></ul><router-link to class="item"><i class="iconfont icon-wujiaoxingxingxing c2 img"></i><h4>我的收藏</h4><span><i class="iconfont icon-xiangyou"></i></span></router-link><router-link to class="item"><i class="iconfont icon-quan c3 img"></i><h4>我的抵用券</h4><span>41<i class="iconfont icon-xiangyou"></i></span></router-link><router-link to class="item"><i class="iconfont icon-lipin c4 img"></i><h4>我的抽獎單</h4><span><i class="iconfont icon-xiangyou"></i></span></router-link><router-link to class="item"><i class="iconfont icon-tubiaozhizuo- c5 img"></i><h4>積分換禮品</h4><span><i class="iconfont icon-xiangyou"></i></span></router-link><a class="item" @click="quit"><i class="iconfont icon-fanhui c5 img"></i><h4>退出登錄</h4><span></span></a></div> </template><script> export default {data() {return {};},methods: {quit() {// 移除statelocalStorage.removeItem("state");// 跳轉到首頁去this.$router.push("/");}} }; </script><style scoped> @import url("../assets/css/user.css"); </style>

user.css

.user{background-color: #eee;padding-top: 1rem; } .user .header{background-color: orange;display: flex; } .header .lt, .header .rt{width: 1rem;height: 1rem;color:#fff;text-align: center; } .header h3{text-align: center;color:#fff;font-weight: normal;flex: 1; } .header .rt a{width: 1rem;height:1rem;display:inline-block; } .header .rt a:first-child{margin-left: -1.1rem; } .header .rt i{font-size:.4rem;color:#fff; } .header .lt i{font-size:.5rem; } .userinfo{display: flex;background-color: red;padding:.3rem .2rem;align-items: center;justify-content: space-between;background-image: url(../../../static/imgs/banner.png);background-size: 100% 100%; } .userinfo img{width:1.2rem;height:1.2rem;margin-right: .2rem; } .userinfo .txt{flex: 1; } .userinfo .txt h3{color:#fff;font-weight: normal; } .userinfo p{font-size:.24rem;color:#fff; } .userinfo i{font-size:.6rem;color:#fff; } .item{display: flex;justify-content: space-between;background-color: #fff;line-height:.8rem;border-bottom:1px solid #eee;color:#999;align-items: center;padding:0 .2rem; } .item .img{width:.6rem;height:.6rem;text-align: center;line-height: .6rem;font-size: .36rem;color:#fff; } .item .c1{background-color: orange; } .item .c2{background-color: blue; } .item .c3{background-color: green; } .item .c4{background-color: hotpink; } .item .c5{background-color: indianred; } .item h4{font-weight:normal;flex:1;margin-left: .2rem; } .item span i{font-size:.4rem; } .order-info{display: flex;padding:.4rem .2rem;background-color: #fff;margin-bottom: .2rem; } .order-info li{width:25%;text-align:center;position: relative; } .order-info li .iconfont{font-size:.6rem;color:#999 } .order-info li p{color:#999;line-height:.4rem;text-align:center; } .order-info li i.num{position: absolute;right: .26rem;top: -.2rem;width: 0.4rem;height: 0.4rem;background-color: red;color: #FFF;text-align: center;line-height: .4rem;border-radius: 50%;font-style: normal; }

2、用戶登錄頁面

login.vue

<template><div class="login"><!-- 頭部 --><div class="header"><div class="lt" @click="$router.go(-1)"><i class="iconfont icon-fanhui"></i></div><h3>登錄頁面</h3><div class="rt"></div></div><!-- 輸入框 --><div class="box"><input type="text" class="ipt" placeholder="請輸入賬號" /><input type="text" class="ipt" placeholder="請輸入密碼" /></div><button class="submit" @click="tijiao">立即登錄</button></div> </template><script> export default {data() {return {};},methods: {tijiao() {alert("登錄成功了");// 將登錄成功的標記存儲在本地環境中localStorage.setItem("state", true);this.$router.back();}} }; </script> <style scoped>@import url("../assets/css/login.css"); </style>

login.css

/* 7.5rem 5.5rem */ .index{padding-top: 1rem;background-color: #eee; } .header .location{text-align:center;color:#000;font-size:.28rem;width:1.3rem; } .header .location img{height:.10rem; } .header .search{width:5rem;display: block;margin:.15rem 0 .15rem 1.4rem;background:#fff;height:.7rem;border-radius:.1rem;line-height:.7rem;color:#aaa; } .header .search img{height:.4rem;margin:0 .1rem;vertical-align:middle; } .header .right img{height:.5rem;margin-top:.25rem; } .list{margin-top:.3rem;background-color: #fff; } .list .tit{line-height: .8rem;margin:0 .2rem;border-bottom: 1px solid #eee;font-size:.32rem;font-weight: normal; } .list li{margin:0 .2rem;border-bottom: 1px solid #eee;padding:.2rem 0; } .list li a{display: block;overflow: hidden;color:inherit; } .list li img{width:1.8rem;height:1.8rem;float:left;margin-right:.3rem; } .list li h4{font-size: .32rem;line-height: .6rem;color:#333;font-weight: normal; } .list li h5{font-size:.28rem;color:#999;font-weight: normal; } .list li p{font-size:.24rem;color:#aaa;overflow: hidden; } .list li p .l{float:left; } .list li p .r{float: right; } .list li p span b{color:orange;font-size:.3rem;font-weight:normal;margin-right:.1rem; } .list li p span i{font-size: .24rem;font-style:normal; } .banner{background-color: #fff;padding-bottom: .6rem; } .banner .menus-list{overflow: hidden; } .banner .menus-list li{width:20%;float:left;text-align: center; } .banner .menus-list li img{width:60%;margin:.3rem auto 0; } .banner .menus-list li p{color:#aaa; } .box{background-color: rgba(255,165,0,.1); } .box .more{line-height: .3rem;padding: 0 .2rem;color: #c500bb;font-size: .3rem; } .box .more i{float: right;font-size: .6rem; }

3、用戶登錄判斷

index.js

import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)// 導入頁面組件 import index from "../pages/index" import user from "../pages/user" import tuangou from "../pages/tuangou" import pay from "../pages/pay" import order from "../pages/order" import notfound from "../pages/notfound" import login from "../pages/login"var router = new Router({routes: [{path: '/',meta: { title: "美團首頁", needLogin: false },component: index},{path: '/user',meta: { title: "用戶中心", needLogin: true },component: user},{path: '/tuangou/:id', // 動態路由！meta: { title: "團購詳情", needLogin: false },component: tuangou},{path: '/order',meta: { title: "訂單頁面", needLogin: true },component: order},{path: '/login',meta: { title: "登錄頁面", needLogin: false },component: login},{path: '/pay',meta: { title: "支付頁面", needLogin: true },component: pay},{path: '*',meta: { title: "404頁面", needLogin: false },component: notfound}] })// 路由攔截 router.beforeEach(function (to, from, next) {// 設計標題document.title = to.meta.title;// 滾動條回到頂部window.scrollTo(0, 0)// 登錄判斷if (to.meta.needLogin) { // 需要登錄了的頁面！// 判斷是否登陸了？if (localStorage.getItem("state")) { // 已經登錄next();} else { // 沒登錄router.push("/login")}} else { // 不需要判斷登錄next();} })// 暴露路由！ export default router;

4、將項目打包部署到服務器上

//?項目開發結束之后，執行 “ npm?run?build ” 命令！

??//?生成?dist目錄，交給后臺去部署！

5、項目匯報（項目功能描述）

6、實訓心得

本項目模仿美團網站進行搭建，實現了首頁、團購頁面、訂單頁面等。

運用了很多前端開發中常用的技術，如：編程式導航、動態路由、flex彈性盒子布局等。

在為期9天的項目實訓過程中，我學到了很多的知識。從最基礎的指令（v-html、v-text、v-if、v-for等）、事件綁定、tab切換、組件化開發，到 vue.js環境搭建、項目初始化、父子組件通信、axios的安裝與使用、路由的使用、編程式導航、導航攔截，再到最后的項目實戰。我真的學到了很多很多知識；在學習過程中，記了很多筆記。但是，還有很多知識掌握的并不熟練，課下需要多練習，多總結?！镜?0天，是，項目匯報~~~】

總結

以上是生活随笔為你收集整理的Vue.js-Day09【项目实战(附带 完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。