Vue前端練習

此練習項目只涉及前端，主要是vue和ElementUI框架的使用。（ElementUI官網：Element - The world's most popular Vue UI framework）

一、環境準備

安裝idea
安裝Node.js 一鍵式安裝(不需要做任何配置) npm -v（也可用node多版本管理工具nvm進行管理和下載）
修改npm鏡像源 npm config set registry https://registry.npmmirror.com
獲取鏡像源地址 npm config get registry
安裝VUE Cli腳手架 npm install -g @vue/cli
驗證Vue Cli安裝是否成功 vue -V

? ? ?7.創建Vue Cli工程項目

? ? ? ? 創建一個Vue-Workspace文件夾，用來存放vue項目。在此文件內，打開命令行。

? ? ? 使用?vue create?命令即可創建VUE CLI工程，命令格式是：

vue create 工程名稱

配置工作及如何在idea中打開，請參考以下教程：

Vue-Cli(腳手架)安裝及如何創建Vue-Cli項目-保姆級別教程,手把手教會你-CSDN博客

? ? ? 8.工程結構

? ? ? 8.1 App.vue:此vue文件是訪問工程根路徑時自動顯示的組件(* .vue)

? ? ? 8.2 views文件夾：以后開發的所有的頁面(*.vue)基本上都是保存在此文件夾下

? ? ? 8.3 router/index.js:路由配置文件，在里面配置客戶端請求xxx地址時由xxx.vue頁面顯示

? ? ? 8.4 main.js:工程的主JS文件，引入各個框架的代碼寫在此文件下

? ? ? 8.5 package.json:修改端口號，修改框架版本在此配置文件中操作

? ? ? 8.6 public文件夾：圖片資源文件保存在此文件夾下

? ? ?9.引入ElementUI框架

? ? ? ?9.1終止vue啟動，并執行npm install --save element-ui

? ? ? ?9.2在main.js中引入

? ? ? ? ? ? ?import ElementUI from 'element-ui';

? ? ? ? ? ? ?import 'element-ui/lib/theme-chalk/index.css';

? ? ? ? ? ? ?Vue.use(ElementUI);

main.js代碼：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

二、具體實現及代碼

項目結構如下：

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView,children:[{path: '/reg',component: ()=>import('../views/RegView.vue')},{path: '/login',component: ()=>import('../views/LoginView.vue')},{path: '/index',component: ()=>import('../views/IndexView.vue')},{path: '/detail',component: ()=>import('../views/DetailView.vue')}]}]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

App.vue

<template><div id="app"><router-view/></div>
</template><style>
body {background-color: rgb(241, 242, 243);
}</style>

HomeView.vue

<template><div class="home"><el-container><!--頁面頭部--><el-header height="80px" style="background-color: white"><div style="width: 1200px;margin: 0 auto"><el-row :gutter="20"><el-col :span="6"><img src="/imgs/icon.png" width="200"></el-col><el-col :span="10"><el-menu mode="horizontal" active-text-color="orange"><el-menu-item index="1">首頁</el-menu-item><el-menu-item index="2">食譜</el-menu-item><el-menu-item index="3">視頻</el-menu-item><el-menu-item index="4">資訊</el-menu-item></el-menu><div class="line"></div></el-col><el-col :span="6"><el-input placeholder="請輸入搜索的關鍵字" style="position: relative;top: 20px"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="2"><el-popoverplacement="top-start"title="歡迎來到烘焙坊!"width="200"trigger="hover"><i slot="reference" class="el-icon-user"style="font-size: 30px;position: relative;top: 20px"></i><el-button type="info" @click="reg()">注冊</el-button><el-button type="warning" @click="login()">登錄</el-button></el-popover></el-col></el-row></div></el-header><el-main id="el-main"><router-view/></el-main><!--頁面頁腳--><el-footer style="height:280px;background-color: black;padding: 50px"><div style="width: 1200px;color:#666;text-align:center;margin: 0 auto"><el-row><el-col :span="8"><img src="/imgs/icon.png" width="200"><p>教程靈感就看烘焙坊</p><p>烘焙行業網絡社區平臺</p><p>全國百城上千個職位等你來</p></el-col><el-col :span="8"><el-row id="footer_center"><el-col :span="8"><h3>關于我們</h3><p>烘焙學院</p><p>烘焙食譜</p><p>分類信息</p><p>招聘信息</p><p>社區交流</p></el-col><el-col :span="8"><h3>服務與支持</h3><p>聯系我們</p><p>廣告投放</p><p>用戶協議</p><p>友情鏈接</p><p>在線反饋</p><p>我發投稿</p></el-col><el-col :span="8"><h3>底部導航</h3><p>Archiver</p><p>手機版</p><p>小黑屋</p></el-col></el-row></el-col><el-col :span="8"><p style="font-size: 60px;margin: 0"><span style="color: orange">烘焙</span>坊</p><p>烘焙行業網絡社區平臺</p></el-col></el-row></div></el-footer></el-container></div>
</template><script>export default {name: 'HomeView',methods: {reg() {/*location.href='/reg'   /!*這種跳轉方法是頁面整體刷新，影響頁面的加載速度*!/*//*腳手架開發中使用這種跳轉方式*/if (this.$route.path !== '/reg') {this.$router.push('/reg');}},login() {/*location.href='/login'*/if (this.$route.path !== '/login') {this.$router.push('/login');}}},
}
</script><style>
#footer_center p {margin: 0;
}#footer_center h3 {color: white;
}#el-main {margin: 0;padding: 0;
}
</style>

IndexView.vue

<template><div style="width: 1200px;margin: 10px auto"><!-- 輪播圖 --><el-carousel height="350px"><el-carousel-item><img src="/imgs/banner1.jpg"></el-carousel-item><el-carousel-item><img src="/imgs/banner2.jpg"></el-carousel-item><el-carousel-item><img src="/imgs/banner3.jpg"></el-carousel-item></el-carousel><!-- 烘焙食譜導航條--><el-row style="background-color: white"><el-col :span="3"><p style="font-size: 28px;margin: 15px">烘焙食譜</p></el-col><el-col :span="21"><el-menu mode="horizontal" active-text-color="orange" default-active="1"><el-menu-item index="1">全部</el-menu-item><el-menu-item index="2">面包</el-menu-item><el-menu-item index="3">零食</el-menu-item><el-menu-item index="4">家常菜</el-menu-item></el-menu></el-col></el-row><!--烘焙食譜列表--><el-row :gutter="20"><el-col :span="6" v-for="item in recipeArr" style="margin: 10px 0"><el-card><a href="javascript:void(0)"><img :src="item.imgUrl" width="100%" height="145"><p style="height: 40px;">{{ item.title }}</p></a><el-row><el-col :span="4"><el-avatar :src="item.userImgUrl" size="small"></el-avatar></el-col><el-col :span="10">{{ item.nickName }}</el-col><el-col :span="10"><span style="float: right;font-size: 12px;color: #666">{{ item.categoryName }}</span></el-col></el-row></el-card></el-col></el-row><!--點擊加載更多--><div style="text-align: center"><el-button>點擊加載更多</el-button></div><!-- 烘焙視頻導航條--><el-row style="background-color: white"><el-col :span="3"><p style="font-size: 28px;margin: 15px">烘焙視頻</p></el-col><el-col :span="21"><el-menu mode="horizontal" active-text-color="orange" default-active="1"><el-menu-item index="1">面包教學</el-menu-item><el-menu-item index="2">零食鑒賞</el-menu-item><el-menu-item index="3">家常菜教程</el-menu-item></el-menu></el-col></el-row><!--烘焙視頻列表--><el-row :gutter="20"><el-col :span="6" v-for="item in recipeArr" style="margin: 10px 0"><el-card><a href="javascript:void(0)"><img :src="item.imgUrl" width="100%" height="145"><p style="height: 40px;">{{ item.title }}</p></a><el-row><el-col :span="4"><el-avatar :src="item.userImgUrl" size="small"></el-avatar></el-col><el-col :span="10">{{ item.nickName }}</el-col><el-col :span="10"><span style="float: right;font-size: 12px;color: #666">{{ item.categoryName }}</span></el-col></el-row></el-card></el-col></el-row><!--點擊加載更多--><div style="text-align: center"><el-button>點擊加載更多視頻</el-button></div><!-- 行業資訊導航條--><el-row style="background-color: white"><el-col :span="3"><p style="font-size: 28px;margin: 15px">行業資訊</p></el-col><el-col :span="21"><el-menu mode="horizontal" active-text-color="orange" default-active="1"><el-menu-item index="1">全部</el-menu-item><el-menu-item index="2">美食資訊</el-menu-item><el-menu-item index="3">店家資訊</el-menu-item></el-menu></el-col></el-row><!--行業資訊列表--><el-row :gutter="20"><el-col :span="6" v-for="item in recipeArr" style="margin: 10px 0"><el-card><a href="javascript:void(0)"><img :src="item.imgUrl" width="100%" height="145"><p style="height: 40px;">{{ item.title }}</p></a><el-row><el-col :span="4"><el-avatar :src="item.userImgUrl" size="small"></el-avatar></el-col><el-col :span="10">{{ item.nickName }}</el-col><el-col :span="10"><span style="float: right;font-size: 12px;color: #666">{{ item.categoryName }}</span></el-col></el-row></el-card></el-col></el-row><!--點擊加載更多--><div style="text-align: center"><el-button>點擊加載更多資訊</el-button></div></div>
</template><script>
export default {name: "IndexView",data() {return {recipeArr: [{"id": 27,"title": "家常面包","imgUrl": "imgs/a.jpg","categoryName": "面包","nickName": "湯姆","userImgUrl": "imgs/head.jpg"},{"id": 18,"title": "爆漿抹茶甜甜圈面包，自帶幸福感的小甜甜","imgUrl": "imgs/b.jpg","categoryName": "家常菜","nickName": "湯姆","userImgUrl": "imgs/head.jpg"},{"id": 17,"title": "心形火龍果椰蓉面包,任誰都抗拒不了","imgUrl": "imgs/c.jpg","categoryName": "小食","nickName": "湯姆","userImgUrl": "imgs/head.jpg"},{"id": 16,"title": "蔓越莓綠豆糕，味道還不錯值得一試!","imgUrl": "imgs/d.jpg","categoryName": "面包","nickName": "湯姆","userImgUrl": "imgs/head.jpg"},]}}
}
</script><style scoped>
a {text-decoration: none;color: #11192d;
}</style>

LoginView.vue

<template><div id="main_div"><el-card style="width: 500px;height: 300px;margin: 50px auto"><el-form label-width="80px" style="margin-top: 50px;width: 430px"><el-form-item label="用戶名"><el-input placeholder="請輸入用戶名" v-model="user.username"></el-input></el-form-item><el-form-item label="密碼"><el-input type="password" placeholder="請輸入密碼" v-model="user.password"></el-input></el-form-item><el-form-item style="text-align: center;"><el-button type="primary" style="position: relative;right: 30px">登錄</el-button></el-form-item></el-form></el-card></div>
</template><script>
export default {name: "LoginView",data() {return {user: {username: "",password: ""}};}
}
</script><style scoped>#main_div {height: 500px;background-image: url('/public/imgs/loginbg.gif');background-position: center; /*設置背景圖居中*/background-size: cover; /*設置為封面*/overflow: hidden; /*解決粘連問題*/
}</style>

RegView.vue

<template><div style="width: 1200px;margin: 20px auto"><el-row :gutter="20"><el-col :span="12"><el-card><img src="/imgs/reg.png" width="100%"></el-card></el-col><el-col :span="12"><el-form  label-width="80px" style="margin-top: 50px"><el-form-item><h1 style="font-size: 25px">立即注冊 <a href="/login"style="font-size: 15px;color:#0aa1ed;text-decoration:none;float: right">已有賬號?現在登錄</a></h1></el-form-item><el-form-item label="用戶名"><el-input placeholder="請輸入用戶名"></el-input></el-form-item><el-form-item label="密碼"><el-input type="password" placeholder="請輸入密碼"></el-input></el-form-item><el-form-item label="昵稱"><el-input placeholder="請輸入昵稱"></el-input></el-form-item><el-form-item style="text-align: center;"><el-button type="primary">注冊</el-button></el-form-item></el-form></el-col></el-row></div>
</template><script>
export default {name: "RegView"
}
</script><style scoped></style>

DetailView.vue

<template><el-row gutter="20"><el-col span="18"><el-card><h2 style="color: orange;text-align: center">棗泥花式面包,好吃到爆!</h2><p style="font-size: 12px;color: #666;text-align: center">作者:湯姆 | 發布時間:2023/5/26 11:12:30 | 閱讀次數:1</p><el-divider></el-divider><el-card style="font-size: 12px"><b style="color: #409EFF">摘要:</b>之前做了棗泥餡，配上花式面包，好吃到爆。 棗泥花式面包的用料 肉松面包面團</el-card><p style="height: 500px">文章內容</p></el-card><!--評論相關開始--><el-card><p>發一條友善的評論</p><el-divider></el-divider><el-row gutter="20"><el-col span="20"><el-input type="textarea" placeholder="說點兒啥..."></el-input></el-col><el-col span="2"><el-button>發布</el-button></el-col></el-row><!--評論列表開始--><el-row style="margin: 5px 0"><el-col span="2"><el-avatar src="imgs/head.jpg"></el-avatar></el-col><el-col span="20"><span style="color: orange;font-weight: bold">湯姆:</span><p style="margin:5px 0">開起來很好吃!</p><span style="color: #666;font-size: 12px">2023/5/26 15:52:30</span></el-col></el-row><el-row style="margin: 5px 0"><el-col span="2"><el-avatar src="imgs/head.jpg"></el-avatar></el-col><el-col span="20"><span style="color: orange;font-weight: bold">湯姆:</span><p style="margin:5px 0">開起來很好吃!</p><span style="color: #666;font-size: 12px">2023/5/26 15:52:30</span></el-col></el-row><el-row style="margin: 5px 0"><el-col span="2"><el-avatar src="imgs/head.jpg"></el-avatar></el-col><el-col span="20"><span style="color: orange;font-weight: bold">湯姆:</span><p style="margin:5px 0">開起來很好吃!</p><span style="color: #666;font-size: 12px">2023/5/26 15:52:30</span></el-col></el-row><!--評論列表結束--></el-card><!--評論相關結束--></el-col><el-col span="6"><el-card class="right-card" style="height: 240px;text-align: center;"><div style="background-image: url('/imgs/avarbg.jpg');height: 90px"></div><div style="position: relative;top: -45px"><img src="imgs/head.jpg"style="border-radius: 90px;border: 5px solid white;width: 90px;height: 90px"><p style="font-size: 20px;margin: 0;font-weight: bold">湯姆</p><i class="el-icon-edit">本文作者</i><br><i class="el-icon-time">2023/5/26 16:43:30</i></div></el-card><!--作者其它文章開始--><el-card style="margin:10px 0"><h3>作者其它文章</h3><el-divider></el-divider><!--文章列表開始--><el-row gutter="10" v-for="item in 4"><el-col span="10"><img src="imgs/a.jpg" width="100%" height="70px"></el-col><el-col span="14"><p style="margin: 0;height: 50px">棗泥面包好吃到爆!</p><i class="el-icon-time" style="color: #666">2023/6/30</i></el-col></el-row><!--文章列表結束--></el-card><!--作者其它文章結束--><!--熱門文章開始--><el-card style="margin:10px 0"><h3>熱門文章</h3><el-divider></el-divider><!--文章列表開始--><el-row gutter="10" v-for="item in 4"><el-col span="10"><img src="imgs/a.jpg" width="100%" height="70px"></el-col><el-col span="14"><p style="margin: 0;height: 50px">棗泥面包好吃到爆!</p><i class="el-icon-time" style="color: #666">2023/6/30</i></el-col></el-row><!--文章列表結束--></el-card><!--熱門文章結束--></el-col></el-row></template><script>
export default {name: "DetailView"
}
</script><style scoped></style>