@Author：Runsen @Date：2020/10/21
写在前面：我是「Runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！
今天将完成Vue项目去哪儿网App首页开发，下面是在本次慕课网完成Vue项目去哪儿网App首页开发的总结和感受。
在Vue中有三种CSS预处理，现在用的最多的是stylus。
下载安装stylus、stylus-loader包。
npm install stylus@0.54.5 --save npm install stylus-loader@3.0.1 --save在package.json中就可以stylus和stylus-loader 对应的版本号。
在vscode的编写stylus，最好安装stylues的插件
在阿里巴巴图标官方，创建iconfont项目，并添加所需的图标。下载到本地。
将对应的文件复制到对应的项目，并修改iconfont.css文件对应的路径。
在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>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>在webpack.base.conf.js中配置'styles': resolve('src/assets/styles'),。只要在import中出现了styles，代表就是src/assets/styles路径
具体实现效果如下。
参考课程：慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
请一键三连！！！！！ 刘润森！ 认证博客专家 Python Java 前端 17年就读于东莞XX学院化学工程与工艺专业，GitChat作者。Runsen的微信公众号是"Python之王"，因为Python入了IT的坑，从此不能自拔。公众号内容涉及Python，Java计算机、杂谈。干货与情怀同在。喜欢的微信搜索：「Python之王」。个人微信号：RunsenLiu。不关注我公号一律拉黑！！！