day 75 vue 项目记录.路飞学城(一)

前情提要:

　　通过vue 搭建路飞学城记录 

　　　　一:项目分析

　　　　　

　　　　二:项目搭建

　　　　　　1:创建项目　　　

　　　　　　　　　　vue init webpack luffy

　　　　　　2:初始化项目

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

　　　　　　　　2>1: 清除位置

　　　　　　　　　　

 

　　　　　　　2>2:修改后效果

　　　　　　　　

　　　　　　　　　　　　2>3:结果图

　　　　　　　　　　

 

　　　　　三:引入ElementUI

　　　　　　1:快速安装ElementUI

　　　　　　　　

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

 

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

 

 

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

 

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

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

 

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

 

　　　　　　　　

 

　　　　　　1>2:项目执行完效果

　　　　　　2:配置ElementUI到项目中

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

　　　　　　

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

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

 

　　　　　　　　四:首页

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

　　　　　　1:创建首页组件

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

　　　　

 

 

　　　　效果:

　　　　　　

 

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

　　　　　　效果:

　　　　

　　　　　　2:开发导航子组件

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

　　　　

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

　　　　　　

 

　　　　　　　　效果图:

　　　　

 

 　　　　　　　　2>1:在首页引入导航组件

　　　　　　代码:

　　　　　　

 

　　　　　　效果图:

　　　　

　　　　　　2>2 headers 子组件代码:

　　　　　　

 

 

 

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

　　　　

 

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

 

 　　　　3:开发轮播图子组件

 

 　　　　1:创建Banner.vue组件文件

　　　　代码:

　　　　

 

　　效果:

 

 　　　　2:在home 组件中引入Banner 子组件

　　　　

 

　　　　效果图:

　　　　

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

 

 　　　　

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

　　　　　　　　

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

 

 

　　　　　　Banner.vue组件,代码:

 

 

 

　　　　　　

　　　　　　展示效果

　　

　　　　　　5:页面脚部

　　　　1:创建脚部文件

　　　　　　　　

　　　　　　　　

　　　　　　2:在home 组件中引入footer组件

　　　　　　　　Home组件代码：

　　　　　　

 

　　　　效果图:

　　　　

 

 　　　　　　3: 编写脚步样式

　　　　　　

 

 

 

 　　　　　　效果:

　　　　　　

 

　　　　　　　　

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

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

 

 

　　　　　　　　五:免费课

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

　　　　　　

 

　　　　　　　　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,
    },

  ]
})

 

 

　　　

 

 

转载于:https://www.cnblogs.com/baili-luoyun/p/10792972.html