六十五、完成Vue项目去哪儿网App首页开发(来源:慕课网)

举报
毛利 发表于 2021/07/15 02:41:17 2021/07/15
【摘要】 2020/10/21、 周三、今天又是奋斗的一天。 @Author:Runsen @Date:2020/10/21 写在前面:我是「Runsen」,热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端,需要每天的日积月累, 每天都要加油!!! 今天将完成Vue项目去哪儿网App首页开发,下面是在本次慕课网完成Vue项目去哪...
2020/10/21、 周三、今天又是奋斗的一天。

@Author:Runsen
@Date:2020/10/21

写在前面:我是「Runsen」,热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端,需要每天的日积月累, 每天都要加油!!!

今天将完成Vue项目去哪儿网App首页开发,下面是在本次慕课网完成Vue项目去哪儿网App首页开发的总结和感受。

全局安装stylus和stylus-loader

在Vue中有三种CSS预处理,现在用的最多的是stylus。

下载安装stylus、stylus-loader包。

npm install stylus@0.54.5  --save
npm install stylus-loader@3.0.1 --save

  
 
  • 1
  • 2

package.json中就可以stylus和stylus-loader 对应的版本号。

在vscode的编写stylus,最好安装stylues的插件

创建iconfont项目

在阿里巴巴图标官方,创建iconfont项目,并添加所需的图标。下载到本地。

将对应的文件复制到对应的项目,并修改iconfont.css文件对应的路径。

Home.vue

在Home.vue引用HomeHeader ,HomeHeader 对应的<home-header>

<template>
  <div> <home-header></home-header>
  </div>
</template>

<script>
// 局部组件需要插入到components中,由于键和值都是一样,所以写成HomeHeader
import HomeHeader from './components/Header'
export default {
  name: 'Home',
  components: { HomeHeader
  }
}
</script>

<style>
</style>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

Header.vue

Header.vue就是首页开发的组件,将对应的图标引用。

在styles中1rem等于100px。px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

对于需要适配各种移动设备,使用rem,因此前端开发基本用rem。

<template>
  <div class="header"> <div class="header-left"> <div class="iconfont back-icon">&#xe624;</div> </div> <div class="header-input"> <span class="iconfont">&#xe602;</span> 输入城市/景点/游玩主题 </div> <div class="header-right">城市 <span class="iconfont arrow-icon">&#xe658;</span> </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header
  display: flex
  line-height: 0.86rem
  height: 0.86rem
  background: $bgColor
  color: #fff
  .header-left width: 0.64rem float: left .back-icon text-align: center font-style: 0.4rem
  .header-input flex: 1 background: #fff height: 0.64rem line-height: 0.64rem margin-top: 0.12rem margin-left: 0.2rem boirder-radius: 0.1rem color: #ccc
  .header-right width: 1.24rem float: right text-align: center .arrow-icon margin-left: -0.04rem font-size: 0.24rem
</style>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

配置webpack,对项目进行维护

webpack.base.conf.js中配置'styles': resolve('src/assets/styles'),。只要在import中出现了styles,代表就是src/assets/styles路径


具体实现效果如下。


参考课程:慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发

请一键三连!!!!!

文章来源: maoli.blog.csdn.net,作者:刘润森!,版权归原作者所有,如需转载,请联系作者。

原文链接:maoli.blog.csdn.net/article/details/109203399

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。