六十五、完成Vue项目去哪儿网App首页开发(来源:慕课网) | 您所在的位置:网站首页 › 去哪儿网app官方下载安装 › 六十五、完成Vue项目去哪儿网App首页开发(来源:慕课网) |
2020/10/21、 周三、今天又是奋斗的一天。
@Author:Runsen @Date:2020/10/21 写在前面:我是「Runsen」,热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端,需要每天的日积月累, 每天都要加油!!! 今天将完成Vue项目去哪儿网App首页开发,下面是在本次慕课网完成Vue项目去哪儿网App首页开发的总结和感受。 文章目录 全局安装stylus和stylus-loader创建iconfont项目Home.vueHeader.vue配置webpack,对项目进行维护 全局安装stylus和stylus-loader在Vue中有三种CSS预处理,现在用的最多的是stylus。 下载安装stylus、stylus-loader包。 npm install [email protected] --save npm install [email protected] --save在package.json中就可以stylus和stylus-loader 对应的版本号。 在vscode的编写stylus,最好安装stylues的插件 在阿里巴巴图标官方,创建iconfont项目,并添加所需的图标。下载到本地。 将对应的文件复制到对应的项目,并修改iconfont.css文件对应的路径。 在Home.vue引用HomeHeader ,HomeHeader 对应的 Header.vue就是首页开发的组件,将对应的图标引用。 在styles中1rem等于100px。px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 对于需要适配各种移动设备,使用rem,因此前端开发基本用rem。 输入城市/景点/游玩主题 城市 export default { name: 'HomeHeader' } @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 配置webpack,对项目进行维护在webpack.base.conf.js中配置'styles': resolve('src/assets/styles'),。只要在import中出现了styles,代表就是src/assets/styles路径
|
CopyRight 2018-2019 实验室设备网 版权所有 |