路飞学城项目前端笔记

目录

路飞学城项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中的默认模板代码和默认样式

<template>
  <div id="app">
  </div>
</template>
​
<script>
​
export default {
  name: 'App',
  components: {
  }
}
</script>
​
<style>
</style>
​

修改后效果：

 

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

 

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: '<App/>'
});
​

 

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

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

代码：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
​
<script>
export default {
  name: 'App',
  components: {
​
  }
}
</script>
​
<style>
​
</style>
​

 

3. 引入ElementUI

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

ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就