慕课网Vue2.5去哪儿实战课程（3）

红太狼 2022-03-17 01:16 170阅读 0赞

**6.Vue 项目预热**

本章首先讲解项目环境的基础配置，在此基础上分析工程代码目录结构，延展讲解 Vue中单文件组件及单页面应用路由的概念，最后将带大家整理项目目录，完成 stylus、reset.css 等基础工具及样式的引入，完成项目开发前的准备工作。

6.1Vue项目预热 - 环境配置

git还要学习，git和github联合使用。

6.2Vue项目预热 - 项目代码介绍

.editorconfig是编辑器配置文件，比如缩进啊、字符编码等等。

package-lock.json是管理依赖库的版本，方便团队合作。

vue.config.js配置参考资料：  
https://cli.vuejs.org/zh/config/  
https://cli.vuejs.org/zh/config/\#%E7%9B%AE%E6%A0%87%E6%B5%8F%E8%A7%88%E5%99%A8  
https://www.jianshu.com/p/6307c568832d  
https://segmentfault.com/a/1190000016101954?utm\_source=tag-newest  
https://juejin.im/post/5bd02f98e51d457a944b634f

main.js 项目入口文件  
App.vue 项目根组件

config/index.js 基础配置信息  
config/dev.env.js 开发环境配置信息  
config/prod.env.js 生产环境配置信息

bulid/webpack.base.conf.js 编译基础配置信息  
build/webpack.dev.conf.js 编译开发配置信息  
build/webpack.prod.conf.js 编译生产配置（线上环境配置）信息

项目文件间结构：  
https://www.cnblogs.com/zly1022/p/9627805.html

6.3Vue项目预热 - 单文件组件与Vue中的路由

单文件组件主要由三部分组成：

<template>
    
    </template>
    
    <script>
    		
    	export default{
    
    	}
    
    </script>
    
    <style>
    </style>

router-link 跳转作用，相当于a标签  
router-view 渲染作用，这个标签显示的内容当前路由的地址所对应的路由内容，一般就是根目录/。

<div id="app">
      <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link to="/info">Info</router-link>
      </div>
      <router-view/>
    </div>

更多可以参考：https://www.cnblogs.com/SamWeb/p/6610733.html

6.4Vue项目预热 - 单页应用VS多页应用

多页面应用：  
每次页面跳转都会返回一个新的HTML页面。  
优点：首屏时间快，SEO效果好。  
缺点：页面且缓慢

单页面应用(例如Vue)：  
通过前端JS清除当前页面，然后挂在下一个页面，这样每次跳页的时候去请求一个HTML页面了（页面跳转——》JS渲染）。  
优点：页面切换快  
缺点：首屏时间稍慢，SEO差。

6.5Vue项目预热 - 项目代码初始化

3个文件夹：  
assets - 各类静态资源文件夹 - 比如 图片, css 文件等。  
components - 组件文件夹, 组件是 vue 等 MVC 框架等核心概念，自行了解含义。  
view - 视图文件夹。

5个文件：  
app.vue、main.js - 主视图、配合 main.js 成为 vue 程序的主入口。  
router.js - 路由程序主入口。  
store.js - 路由状态管理系统。

项目文件详细信息可以查看：https://www.imooc.com/article/75358

推荐一个Vue3系列教程：https://www.cnblogs.com/ndos/category/1295752.html

**7.旅游网站首页开发**

7.1Vue项目首页 - header区域开发

sublime安装Vue插件：  
https://blog.csdn.net/wenjiusui8083/article/details/79447148  
https://blog.csdn.net/qq\_29132907/article/details/80714992

Vue中使用stylus：  
https://www.cnblogs.com/cpqwebfe/p/7048612.html  
https://www.zhangxinxu.com/jq/stylus/selectors.php  
https://www.jianshu.com/p/5fb15984f22d  
https://blog.csdn.net/lyt\_angularjs/article/details/80457099

7.2Vue项目首页 - iconfont 的使用和代码优化

使用iconfont时候，记得去iconfont.css中修改字体样式的路径位置。

使用方法：  
1.class=“iconfont”  
2.不同图标对应不同代码

引用外部stylus:  
我们外部定义variables.styl，然后引用`@import '../assets/styles/variables.styl'`

有时候路径中我们可以用@表示src路径，因为前面有@import，此时我们这么写：  
`@ import '~@/assets/styles/variables.styl'`

要点一：使用iconfont步骤  
1.官网：http://www.iconfont.cn/ 选择需要的icon  
2.需要引入下载后的这四种字体文件.eot .svg .ttf .woff 及.css样式  
3.在.css文件里修改url路径 加入./iconfont/ 注意base64不用加  
4.在main.js中加入import ‘styles/iconfont.css’  
5.在Header.vue里面各个需要的div或者span标签中加入class=“iconfont”，中间写各个图标的复制码即可完成

要点二：代码优化  
一、添加全局颜色 主题样式增加维护性：  
1.在styles中增加varibles.styl文件里面写 `$bgColor = #00bcd4`，之后将Header.vue中的`background: $bgColor`。  
2.在Header.vue中的style下加入`@import '~@/assets/styles/varibles.styl'`即可  
注意：  
1.import在CSS中前必须加@ ，JS中不用加。  
2.@import里面的内容`‘ ~@’在@=src前加~`

如下：

@import '~@/assets/styles/variables.styl'

Vue cli3.x 别名配置：  
https://juejin.im/post/5aca3ce7518825619d4d0db1  
https://blog.csdn.net/linfeng886/article/details/85800540

7.3Vue项目首页 - 首页轮播图

Swiper：https://github.com/surmon-china/vue-awesome-swiper

**>>> 是stylus的样式穿透（让样式不仅在该组件起作用，也让在>>>指向的地方起作用）**

.wrapper >>> .swiper-pagination-bullet-active
    		background: red !important

关于stylus中`>>>`更多可以参考：  
https://blog.csdn.net/eebaicai/article/details/84672452  
https://www.cnblogs.com/jszhp/p/9549706.html

添加`loop: true`是指循环轮播，到第一个图片还可以往右循环播放。

7.4Vue项目首页 - 图标区域页面布局

CSS样式布局还要学习。

7.5Vue项目首页 - 图标区域逻辑实现

sublime中：  
ctrol + \[ 往前移动一个tab位置  
ctrol + \] 往后移动一个tab位置

还要了解Vue的mixins。

还要了解下面代码的作用：

overflow:hidden
    white-space:nowrap
    text-overflow:

7.6Vue项目首页 - 热销推荐组件开发

7.7Vue项目首页 - 开发周末游组件

stylus中 层级关系，缩进问题：

<div>
    		<div class="recommend-title">周末去哪儿</div>
    		
    		
    		<ul>
    			<li class="item border-bottom" 
    				v-for="item in recommendList"
    				:key="item.id">
    				<div class="item-img-wrapper">
    					<img class="item-img" :src="item.imgUrl">
    				</div>
    				<div class="item-info">
    					<p class="item-title">{
       {item.title}}</p>
    					<p class="item-desc">{
       {item.desc}}</p>
    					<button class="item-button">查看详情</button>
    				</div>
    			</li>
    		</ul>
    
    	</div>
    
    //缩进1展示
    	.recommend-title
    		margin-top:.2rem
    		line-height:.8rem
    		background:#eee
    		text-indent:.2rem
    	
    	.item-img-wrapper
    		overflow:hidden
    		height:0
    		padding-bottom:33.9%
    		.item-img
    			width:100%
    	
    	.item-title
    		line-height:.54rem
    		font-size:.32rem
    		ellipsis()
    	.item-desc
    		lin-height:.4rem
    		color:#ccc
    		ellipsis()
    
    //缩进2展示
    	.recommend-title
    		margin-top:.2rem
    		line-height:.8rem
    		background:#eee
    		text-indent:.2rem
    	
    	.item-img-wrapper
    		overflow:hidden
    		height:0
    		padding-bottom:33.9%
    		.item-img
    			width:100%
    	
    	.item-info
    		padding:.1rem
    		.item-title
    			line-height:.54rem
    			font-size:.32rem
    			ellipsis()
    		.item-desc
    			lin-height:.4rem
    			color:#ccc
    			ellipsis()

所以可以看出来，父子关系的元素之间要保持缩进，如果不是父子关系，例如兄弟关系或者A和兄弟B的子元素之间，也是平级，除非列出B的样式，那么B的子元素就要缩进了。

7.8Vue项目首页 - 使用 axios 发送 ajax 请求

vue-cli3.0默认项目目录与2.0的相比，更精简:  
1.移除的配置文件根目录下的，build和config等目录，  
2.移除了static文件夹，新增了public文件夹，并且index.html移动到public中。  
3.在src文件夹中新增了views文件夹，用于分类 试图组件 和 公共组件 。  
4.大部分配置 都集成到 vue.config.js这里,在项目根目录下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件

上面相关更多可以查看：https://segmentfault.com/a/1190000014456796?utm\_source=index-hottest

vue.config.js配置可以参考文章（**配置完要记得重启服务**）：  
https://juejin.im/post/5bd02f98e51d457a944b634f  
https://blog.csdn.net/lfcss/article/details/81055847\#commentBox  
https://www.jianshu.com/p/8493282fe232

在vue.config.js里大概配置：  
常用的路径名、根目录、预处理、devServer配置、pwa、dll、第三方插件等等

关于关于vue中的 `h => h(App)`：  
https://segmentfault.com/a/1190000014254740

Vue3中模拟数据mock：  
（更多mock配置信息参考文章：https://www.html.cn/archives/10066）  
https://blog.csdn.net/lfcss/article/details/81055847\#commentBox  
vue2和vue3模拟数据比较主要参考：https://www.cnblogs.com/beevesnoodles/p/10026751.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
上面模拟数据中Vue.config.js我是这么写的：

const path = require('path')
    
    module.exports = {
    
    	publicPath: '/',
    
    	lintOnSave:false,
    
    	devServer: {
    
    		open:true,
    		//host:'localhost',
    		//port:8000,
    
    		proxy:{
    			'/api':{
    				target: 'http://localhost:8080',
    				changeOrigin: true,
    				pathRewrite: {
    					'^/api':'/mock'
    				}
    			}
    		}
    	}
    
    }

关于模拟数据，以为是访问localhost:8080/public/mock/index.json，实际上是访问localhost:8080/mock/index.json才能访问到数据，因为访问静态文件默认会找public，参考文章：https://segmentfault.com/q/1010000015494645

慕课网vue教程“饿了么” ，在vue2.5vue-cli3 怎么写：  
https://segmentfault.com/a/1190000014438809

当我们希望父组件可以对子组件进行定制时候，我们可以使用slot。

axios使用：  
https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html  
https://www.cnblogs.com/Sunzz/p/10791438.html  
https://www.cnblogs.com/zhouyangla/p/6753673.html

7.9Vue项目首页 - 首页父子组组件间传值

父子组件传值过程：

//Home.vue(父组件)
    <div class="about">
        
        <HomeHeader :city="city"></HomeHeader>
    </div>
    
    export default {
    	name:'Home',
    	//声明局部组件
    	components:{
    		HomeHeader:HomeHeader,
    		HomeSwiper:HomeSwiper,
    		HomeIcons:HomeIcons,
    		HomeRecommend:HomeRecommend,
    		HomeWeekend:HomeWeekend
    	},
    	data:function(){
    		return {
    			city:''
    		}
    	},
    	methods:{
    		getHomeInfo(){
    			axios.get('/api/index.json')
    				.then(this.getHomeInfoSucc)
    		},
    		getHomeInfoSucc(res){
    			res = res.data
    			if (res.ret && res.data) {
    				this.city = res.data.city
    			}
    			console.log(res.data.city)
    		}
    	},
    	//挂在getHomeInfo函数
    	mounted(){
    		this.getHomeInfo()
    	}
    }
    
    //HomeHeader.vue（子组件）
    <div class="header-right">
        	{
       {this.city}}
        	<span class="iconfont arrow-icon"></span>
    </div>
    
    <script>
    export default {
    	name:'HomeHeader',
    	props:{
    		city:String
    	}
    
    }
    </script>

ajax请求好数据之后，通过`this.city = res.data.city`赋值给data里面city，然后通过`:city="city"`传递给子组件，子组件通过props接收了city，这样子组件就可以显示数据了。

希望Swiper中没有自动滚动的效果，示例代码如下修改：

<swiper :options="swiperOption">
    </swiper>
    
    export default{
    	data:function(){
    		return {
    			swiperOption:{
    				autoplay:false
    			}
    		}
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220317/c79013c4a47a4eb5a174dd2a931e950d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220317/9a1fa1aa11514e39bb5263f6f88f5282.png