vue- 项目之前端页面搭建1

项目分析

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

购买成功

我的订单

课时播放页面

项目搭建

1. 创建项目目录
   cd 项目目录
   vue init webpack luffy
   
   # 例如：我要把项目保存在桌面下 ~/Desktop/luffy ，可以如下操作：
   

   cd Desktop
   vue init webpack luffy

2. 根据需要在生成项目时，生成选择对应的选项
   
   

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

   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

1. 下载路由组件
   npm i vue-router -S
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:[
       // 路由列表
   
     ]
   })

3. 注册路由信息
   

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

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

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

引入ElementUI

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

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

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

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

3. 快速安装ElementUI
   

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

   npm i element-ui -S

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

4.  

   配置ElementUI到项目中
   

   在main.js中导入ElementUI，并调用。代码：
   // elementUI 导入
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   // 调用插件
   Vue.use(ElementUI);

    

首页

1. 创建首页组件
   在src/components目录下创建文件 Home.vue
2. 子组件：在src/components/common目录下创建文件
3. 创建首页对应的路由
   

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

   创建src/components/common/Header.vue目录

5. 在首页引入导航组件
   

   在Home.vue中，代码：
   
   
   
   
   

6. 接下来，我们就可以在组件中参考ElementUI文档来进行样式开发了。
   Header.vue中的组件代码：
   
   

   View Code

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

    

开发轮播图子组件

1. 创建Banner.vue组件
   
   
2. 在Home组件中引入Banner子组件
   

3. 接下来，在ElementUI中有对应的轮播图[跑马灯]效果，可以直接提取过来使用。
   注意，图片保存到static目录下。保存在assets目录下的图片等同于保存在static/img目录下。
   对于图片的使用，如果是vue代码中直接要使用的图片，可以保存accets目录下，如果是第三方插件要使用到的图片，需要保存在static目录下。其实本质上来说，所有的图片都是保存在static目录下的，而assets目录下的内容,最终被vue解析成地址的时候,也是在static目录的.
   

   Banner.vue组件,代码:
   
   
   
   
   

    

页脚创建

1. 创建页脚组件文件
2. 在Home组件中引入Footer组件
   

    

3. 编写页脚样式
   

   在页脚的Footer.vue中编写代码：
   
   
   
   
   
   

免费课

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

    

2. 在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/yang950718/p/10786794.html