项目分析
首页
导航、登录注册栏、轮播图、地板导航
登录注册
选项卡
免费课
课程分类、筛选、课程列表
免费课详情
课程封面视频、优惠活动倒计时、选项卡
我的购物车
全选、商品价格统计
购买结算
购买成功
我的订单
课时播放页面
项目搭建
- 创建项目目录
cd 项目目录
vue init webpack luffy
# 例如:我要把项目保存在桌面下 ~/Desktop/luffy ,可以如下操作:
cd Desktop
vue init webpack luffy - 根据需要在生成项目时,生成选择对应的选项
-
cd luffy
npm run dev
初始化项目
清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认样式
<template> <div id="app"> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
安装路由 vue-router
- 下载路由组件
npm i vue-router -S - 配置路由
1:在src目录下创建router路由目录。在router目录下创建index.js路由文件
index.js路由文件中,编写初始化路由对象的代码 . import Vue from "vue" import Router from "vue-router" // 这里导入可以让让用户访问的组件 Vue.use(Router); export default new Router({ // 设置路由模式为‘history’,去掉默认的# mode: "history", routes:[ // 路由列表 ] })
- 注册路由信息
打开main.js文件,把router路由规则对象注册到vue中. // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router/index'; Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
- 在视图中显示路由对应的内容
在App.vue组件中,添加显示路由对应的内容。 <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
引入ElementUI
-
ElementUI是饿了么团队开发的一个UI组件框架,这个框架提前帮我们提供了很多已经写好的通用模块,我们可以在Vue项目中引入来使用,这个框架的使用类似于我们前面学习的bootstrap框架,也就是说,我们完全可以把官方文档中的组件代码拿来就用,有定制性的内容,可以直接通过样式进行覆盖修改就可以了。
-
中文官网:http://element-cn.eleme.io/#/zh-CN
文档快速入门:http://element-cn.eleme.io/#/zh-CN/component/quickstart
- 快速安装ElementUI
项目根目录执行以下命令:
npm i element-ui -S
上面的命令等同于
npm install element-ui --save
-
在main.js中导入ElementUI,并调用。代码: // elementUI 导入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 调用插件 Vue.use(ElementUI);
首页
- 创建首页组件
在src/components目录下创建文件 Home.vue - 子组件:在src/components/common目录下创建文件
- 创建首页对应的路由
在router/index.js中引入Home组件,并设置Home组件作为首页路由。
代码:
import Vue from "vue" import Router from "vue-router" // 后面这里引入可以被用户访问的页面组件 import Home from "../components/Home" Vue.use(Router); export default new Router({ // 路由跳转模式,注意使用 history mode: "history", // 路由规则 routes:[ { // name:"路由别名", name:"Home", // path: "路由地址", path: "/", // component: 组件类名, component: Home, },{ // name:"路由别名", name:"Home", // path: "路由地址", path: "/home", // component: 组件类名, component: Home, }, ] })
- 开发导航子组件
经过前面的观察,可以发现导航不仅在首页出现,其他页面也有,所以对于这些不同页面中公共的内容,可以创建一个单独的组件目录存放。
创建src/components/common/Header.vue目录
- 在首页引入导航组件
在Home.vue中,代码: <template> <div class="home"> <Header/> </div> </template> <script> import Header from "./common/Header" export default { name: "Home", data(){ return { }; }, components:{ Header, } } </script> <style scoped> </style>
- 接下来,我们就可以在组件中参考ElementUI文档来进行样式开发了。
Header.vue中的组件代码:
<template> <div class="header"> <el-container> <el-header> <el-row> <el-col class="logo" :span="3"> <a href="/"> <img src="@/assets/head-logo.svg" alt=""> </a> </el-col> <el-col class="nav" :span="16"> <el-row> <el-col :span="3"><router-link to="/">免费课</router-link></el-col> <el-col :span="3"><router-link to="/">轻课</router-link></el-col> <el-col :span="3"><router-link to="/">学位课</router-link></el-col> <el-col :span="3"><router-link to="/">题库</router-link></el-col> <el-col :span="3"><router-link to="/">教育</router-link></el-col> </el-row> </el-col> <el-col class="login-bar" :span="5"> <el-row> <el-col class="cart-ico" :span="9"> <router-link to=""> <b class="goods-number">0</b> <img class="cart-icon" src="@/assets/cart.svg" alt=""> <span>购物车</span> </router-link> </el-col> <el-col class="study" :span="8" :offset="2"><router-link to="">学习中心</router-link></el-col> <el-col class="member" :span="5"> <el-menu class="el-menu-demo" mode="horizontal"> <el-submenu index="2"> <template slot="title"><router-link to=""><img src="@/assets/[email protected]" alt=""></router-link></template> <el-menu-item index="2-1">我的账户</el-menu-item> <el-menu-item index="2-2">我的订单</el-menu-item> <el-menu-item index="2-3">我的优惠卷</el-menu-item> <el-menu-item index="2-3">退出登录</el-menu-item> </el-submenu> </el-menu> </el-col> </el-row> </el-col> </el-row> </el-header> </el-container> </div> </template> <script> export default { name: "Header", data(){ return { // 设置一个登录标识,表示是否登录 token: false, }; } } </script> <style scoped> .header{ box-shadow: 0 0.5px 0.5px 0 #c9c9c9; } .header .el-container{ width: 1200px; margin: 0 auto; } .el-header{ height: 80px!important; padding:0; } .logo{ } .logo img{ padding-top: 22px; } .nav{ margin-top: 22px; } .nav .el-col a{ display: block; text-align: center; padding-bottom: 16px; padding-left: 5px; padding-right: 5px; position: relative; font-size: 16px; } .login-bar{ margin-top: 22px; } .cart-ico{ position: relative; border-radius: 17px; } .cart-ico:hover{ background: #f0f0f0; } .goods-number{ width: 16px; height: 16px; line-height: 17px; font-size: 12px; color: #fff; text-align: center; background: #fa6240; border-radius: 50%; transform: scale(.8); position: absolute; left: 16px; top: -1px; } .cart-icon{ width: 15px; height: auto; margin-left: 6px; } .cart-ico span{ margin-left: 12px; } .member img{ width: 26px; height: 26px; border-radius: 50%; display: inline-block; } .member img:hover{ border: 1px solid yellow; } </style>
在App.vue,中设置一些公共样式的代码:
<style> body{ padding: 0; margin:0; } a{ text-decoration: none; color: #4a4a4a; } a:hover{ color: #000; } .header .el-menu li .el-submenu__title{ height: 26px!important; line-height: 26px!important; } .el-menu--popup{ min-width: 140px; } </style>
开发轮播图子组件
- 创建Banner.vue组件
- 在Home组件中引入Banner子组件
<template> <div class="home"> <Header/> <Banner/> </div> </template> <script> import Header from "./common/Header" import Banner from "./common/Banner" export default{ name:"Home", data(){ return {}; }, components:{ Header, Banner, } } </script> <style scoped> .home{ padding-top: 80px; } </style>
- 接下来,在ElementUI中有对应的轮播图[跑马灯]效果,可以直接提取过来使用。
注意,图片保存到static目录下。保存在assets目录下的图片等同于保存在static/img目录下。
对于图片的使用,如果是vue代码中直接要使用的图片,可以保存accets目录下,如果是第三方插件要使用到的图片,需要保存在static目录下。其实本质上来说,所有的图片都是保存在static目录下的,而assets目录下的内容,最终被vue解析成地址的时候,也是在static目录的.
Banner.vue组件,代码: <template> <div class="banner"> <el-carousel trigger="click" height="506px"> <el-carousel-item v-for="banner in banner_list"> <a :href="banner.link"><img width="100%" :src="banner.img" alt=""></a> </el-carousel-item> </el-carousel> </div> </template> <script> export default { name:"Banner", data(){ return { banner_list:[ {link:"http://www.baidu.com",img:"/static/banner/1.png"}, {link:"http://www.baidu.com",img:"/static/banner/2.png"}, {link:"http://www.baidu.com",img:"/static/banner/3.png"}, ] }; } } </script> <style scoped> </style>
页脚创建
- 创建页脚组件文件
- 在Home组件中引入Footer组件
<template> <div class="home"> <Header/> <Banner/> <Footer/> </div> </template> <script> import Header from "./common/Header" import Banner from "./common/Banner" import Footer from "./common/Footer" export default{ name:"Home", data(){ return {}; }, components:{ Header, Banner, Footer, } } </script> <style scoped> .home{ padding-top: 80px; } </style>
- 编写页脚样式
在页脚的Footer.vue中编写代码: <template> <div class="footer"> <el-container> <el-row> <el-col :span="4"><router-link to="">关于我们</router-link></el-col> <el-col :span="4"><router-link to="">联系我们</router-link></el-col> <el-col :span="4"><router-link to="">商务合作</router-link></el-col> <el-col :span="4"><router-link to="">帮助中心</router-link></el-col> <el-col :span="4"><router-link to="">意见反馈</router-link></el-col> <el-col :span="4"><router-link to="">新手指南</router-link></el-col> <el-col :span="24"><p class="copyright">Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p></el-col> </el-row> </el-container> </div> </template> <script> export default { name:"Footer", data(){ return {} } } </script> <style scoped> .footer{ width: 100%; height: 128px; background: #25292e; } .footer .el-container{ width: 1200px; margin: auto; } .footer .el-row { align-items: center; padding: 0 200px; padding-bottom: 15px; width: 100%; margin-top: 38px; } .footer .el-row a{ color: #fff; font-size: 14px; } .footer .el-row .copyright{ text-align: center; color: #fff; font-size: 14px; } </style>
免费课
- 在组件目录components下创建Couses.vue组件文件,代码如下:
<template> <div class="courses"> </div> </template> <script> export default { name:"Courses", data(){ return { } } } </script> <style scoped> </style>
-
import Vue from "vue" import Router from "vue-router" // 导入可以被用户访问的组件 import Home from "@/components/Home" import Courses from "@/components/Courses" Vue.use(Router); export default new Router({ mode: "history", routes:[ // 路由列表 { path: "/", name: "Home", component:Home, }, { path: "/home", name: "Home", component:Home, }, { path: "/courses", name: "Courses", component:Courses, }, ] })