路飞学城项目前端笔记

目录

路飞学城项1. 项目分析2. 项目搭建2.1 创建项目目录2.2 初始化项目2.3 安装路由vue-router2.3.1 下载路由组件2.3.2 配置路由2.3.2.1 初始化路由对象2.3.2.2 注册路由信息2.3.2.3 在视图中显示路由对应的内容3. 引入ElementUI3.1 快速安装ElementUI3.2 配置ElementUI到项目中4. 首页4.1 创建首页组件4.1.1 创建首页对应的路由4.2 开发导航子组件4.2.1 在首页引入导航组件4.3 开发轮播图子组件4.3.1 创建Banner.vue组件文件4.3.1 在Home组件中引入Banner子组件4.5 页面脚部4.5.1 创建脚部组件文件4.5.2 在Home组件中引入Footer组件4.5.3 编写脚部样式5. 免费课5.1 在router/index.js路由中注册路由

 

1. 项目分析

首页
    导航、登录注册栏、轮播图、地板导航
登录注册
    选项卡
免费课
    课程分类、筛选、课程列表
免费课详情
    课程封面视频、优惠活动倒计时、选项卡
我的购物车
    全选、商品价格统计
购买结算
    
购买成功
    
我的订单
    
课时播放页面

 

2. 项目搭建

2.1 创建项目目录

cd 项目目录
vue init webpack luffy

例如，我要把项目保存在桌面下 ~/Desktop/luffy ，可以如下操作：

cd Desktop
vue init webpack luffy

效果：

根据需要在生成项目时，我们选择对应的选项。

根据上面的提示，我们已经把vue项目构建好了，接下来我们可以在pycharm编辑器中把项目打开并根据上面黄色提示，运行测试服务器。

打开项目已经，在pycharm的终端下运行vue项目，查看效果。

npm run dev

接下来，我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行，8080端口被占据了，服务器会自动改端口，所以根据自己实际在操作中看到的地址来访问。)

访问：http://localost:8080

2.2 初始化项目

清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认样式

​

​

​

修改后效果：

 

接下来，我们可以查看效果了，一张白纸~

 

2.3 安装路由vue-router

2.3.1 下载路由组件

npm i vue-router -S

执行效果：

 

2.3.2 配置路由

2.3.2.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:[
    // 路由列表
​
  ]
})
​

2.3.2.2 注册路由信息

打开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: ''
});
​

 

2.3.2.3 在视图中显示路由对应的内容

在App.vue组件中，添加显示路由对应的内容。

代码：

​

​

​

 

3. 引入ElementUI

对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，Vue开发前端项目中，比较常用的就是ElementUI了。

ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。

中文官网：http://element-cn.eleme.io/#/zh-CN

文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart

 

3.1 快速安装ElementUI

项目根目录执行以下命令:

npm i element-ui -S

上面的命令等同于 npm install element-ui --save

执行命令效果：

 

3.2 配置ElementUI到项目中

在main.js中导入ElementUI，并调用。代码：

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);

效果：

 

成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发，首先是首页。

 

4. 首页

首页采用了上下页面布局，首页是导航栏、轮播图。。。脚部等几个小模块。所以我们可以把首页作为一个组件进行开发，然后把首页的这些小模块作为单独的组件来进行开发。

4.1 创建首页组件

在src/components目录下创建文件 Home.vue

代码：

​

​

​

效果：

 

4.1.1 创建首页对应的路由

在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,
    },
  ]
})
​

 

效果：

 

4.2 开发导航子组件

经过前面的观察，可以发现导航不仅在首页出现，其他页面也有，所以对于这些不同页面中公共的内容，可以创建一个单独的组件目录存放。

 

创建src/components/common/Header.vue目录路径，编写代码：

​

​

效果：

 

4.2.1 在首页引入导航组件

代码：

​

​

​

 

效果：

 

接下来，我们就可以在组件中参考ElementUI文档来进行样式开发了。

 

Header的子组件代码：

​

​

​

App.vue，中设置一些公共样式的代码：

 

 

Home组件中引入使用Header子组件，代码无需改变，直接访问效果：

 

 

4.3 开发轮播图子组件

4.3.1 创建Banner.vue组件文件

代码：

​

​

​

 

 

4.3.1 在Home组件中引入Banner子组件

​

​

​

效果：

 

接下来，在ElementUI中有对应的轮播图[跑马灯]效果，可以直接提取过来使用。

注意，图片保存到static目录下。保存在assets目录下的图片等同于保存在static/img目录下。

对于图片的使用，如果是vue代码中直接要使用的图片，可以保存accets目录下，如果是第三方插件要使用到的图片，需要保存在static目录下。其实本质上来说，所有的图片都是保存在static目录下的，而assets目录下的内容,最终被vue解析成地址的时候,也是在static目录的.

 

Banner.vue组件,代码:

​

​

​

效果:

 

4.5 页面脚部

4.5.1 创建脚部组件文件

代码：

​

​
​

​

4.5.2 在Home组件中引入Footer组件

Home组件代码：

​

​

​

效果:

 

4.5.3 编写脚部样式

​

​
​

​

 

效果：

 

首页的三大块我们已经完成了，但是我们开始新的页面出现之前，我们需要把链接补充上， 新增课程的导航链接.

接下来,我们就可以创建免费课的组件.

 

5. 免费课

在组件目录components下创建Couses.vue组件文件,代码如下:

​

​
​

​

5.1 在router/index.js路由中注册路由

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,
    },
​
  ]
})
​