六十五、完成Vue项目去哪儿网App首页开发(来源:慕课网)
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"></div> </div> <div class="header-input"> <span class="iconfont"></span> 输入城市/景点/游玩主题 </div> <div class="header-right">城市 <span class="iconfont arrow-icon"></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
- 点赞
- 收藏
- 关注作者
评论(0)