# Travel

**Repository Path**: rocdodo_admin/Travel

## Basic Information

- **Project Name**: Travel
- **Description**: 慕课网视频教程 - 【Vue2.5开发去哪儿网App 从零基础入门到实战项目】
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-08-19
- **Last Updated**: 2023-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 关于项目

本项目是学习慕课网上的一个 Vue2.5 实战课程之后所编写的项目，课程名称为 《Vue2.5开发去哪儿网App 从零基础入门到实战项目》。

所有代码仅做个人学习所用！

课程学习时间： 2019/06/28 - 2019/07/11

# Vue 课程学习笔记

## 基础部分

- 方法创建在 method 的大括号里面

- 可以将 v-on:click 简写为 @click

- new Vue() 的方法创建 vue 实例

- 两个标签，v-text 会对内容做转义，然后填充；v-html 不会对内容做转义，直接填充。 语法内部都是 js 表达式，可以直接做修改

## 计算属性

VUE 的属性计算方法特点：只有当这个方法所依赖的属性有了改动时才会重新计算，；否则就使用缓存数据。

VUE 的属性计算方法需要放到  computed 大括号下

计算属性有 get 和 set 方法 ，示例代码如下：


	computed:{
		fullName:{
			get:function(){
				return a + b;
			},
			set:function(value){
				var arr = value.split(" ");
				this.a = arr[0];
				this.b = arr[1];
			}
		}
	}


## vue 属性括号总结

- data : 数据
- method :方法
- watch : 监听器
- coumputed : 计算方法
- template : 模版


## 标签的 class 可以与 布尔符、字符串、数组 等绑定

通过这种方式，可以实现页面样式的动态改变

## v-if 和 v-else 的使用

	<div v-if="show">{{msg}}</div>
	<div v-else="show">{{msg}}</div>
	
通过 show 属性可以让这两个 div 其中一个显示。还可以在中间加 v-else-if 标签，用法参照 Js 的语法。

注意：v-if 和 v-else  两个必须紧贴着使用，不能被阻隔。

**通过给相同的标签添加不同的 key 值，可以避免 vue 复用标签**

## 占位符标签

template 标签可以作为占位符，但不会被渲染到页面上

    <template></template>

## 改变数组中某一个元素，并动态更新到页面上的方法

- 方法一：直接重新赋值整个 list 数组
- 方法二：调用数组的变异方法，比如截取，转换等方式
- 方法三：调用 vue 的 set 方法；比如 vueName.$set(vueName.listName,index,value)

## Vue 实例的生命周期钩子

- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed


# 第四部分

- 如何使用 is 标签解决页面 bug ？ **固定标签中使用模版标签时，可能会出现标签不符合 HTML 规范，这时候就可以使用 is 标签**

- **可以通过 ref 获得子组件的引用，从而获取到子组件的内容**

## 父子组件间传值
 
 （父=》子）
- 父组件通过属性的方式向子组件传递数据；
- 子组件不能修改父组件传递过来的数据，但是可以自己申明另外的变量来存储数据，并修改自己的变量。
- 子组件的 data 一定是个函数，而不是实例
 （子=》父）
- 子组件通过事件触发的方式向父组件传递数据；
- 子组件通过  this.$emit('methodName')   的方式触发父组件的方法

## 组件中控制传参类型

组件传参可以通过以下方式进行规范，其中规定传参的数据类型的方式有三种，使用其中一种即可。

	Vue.component('comName',{
		props:{
			content:Number , 			//方式一，规定为数字类型
			//content:[String,Number] ,	//方式二，可以通过数组的方式限制为多个类型
			//type:String , 				//方式三，通过 type 的方式规定传参类型
			required:true,  				//是否必须传参
			default:'default value', 	//设置组件初始化的默认值
			validator:function(value){  //自定义组件传参校验器
				return (value.length > 5)
			}
		},
		template:'<div>{{content}}</div>'
	})
	
### 非 props 属性的特点

- 非 props 特性会展示在子组件的最外层的标签的属性中
- 非 props 参数不能被子组件合法使用

### 给组件加  native 触发原生事件

	<comName @click.native="handleClick"></comName>
	
	
## 4-5 非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）

	Vue.component.bus = new Vue()

	Vue.component('comName',{
		props{
			content:String
		},
		data:function(){
			return { selfContent:this.content}   //因为子组件不能改变父组件参数，所以自己创建一个
		},
		template:'<div @click=="handleClick">{{content}}</div>'，
		method:{
			handleClick:function(){
				this.bus.$emit('change',this.selfContent)
			}
		},
		mounted:function(){ //生命周期函数
			var this_ = this
			this.bus.$on('change',function(msg){
				this_.selfContent = msg
			})
		}
	})
	
	
## 4-6 在 Vue 中使用插槽（slot）

插槽的意义在于简化往子组间中间插入内容的方式。
- 通过给子组间的内部标签添加  slot 属性，可以在使用时做区分
- 添加了 slot 属性的叫做具名插槽，没有的叫做 无名插槽
- 插槽可以设置默认值

      <div id="root">
        <comName>
          <p slot='p-1'>some value1111</p>
          <p slot='p-2'>some value2222</p>
        </comName>
      </div>

      ...

      template:'<div>
            <slot name='p-1'>default value</slot>
            <p>内容</p>
            <slot name ='p-2'>default value</slot>
          </div>'

## 4-7 Vue的作用域插槽

作用域插槽使用场景：列表项中的 dom 结构需要由外部自定义的时候

- 作用域插槽必须被 template 标签包裹
- 作用域插槽的 slot 属性必须放到 props 里面

        <div id="root">
          <comName>
            <template slot-scope="props">
              <h1>{{props.item}}</h1>
            </template>
          </comName>
        </div>

        ...

        template:'<div>
              <ul>
                <slot
                  v-for="item of list"
                  :item=item
                ></slot>
              </ul>
            </div>'
			
			
## 4-8 动态组件与 v-once 指令

动态组件根据 is 属性 type 的变化，自动加载不同的组件

	<component :is="type"></component>
	
	
v-once 指令可以在元素初始化时将实例存储在内存中，可以有效提高静态内容的展示效率

	<div v-once>some content</div>

# 第五部分

## 5-1 Vue 中的 CSS 动画

通过在元素外面添加 transition 标签，可以添加过渡动画效果

    /* 通过 v-if 或者 v-show 控制元素显示和隐藏，通过 transition 监听元素显示和隐藏的动作，然后自动添加动画 */
      <style>
        .v-enter,
        .v-leave-to{
          opacity:0;
        }
        .v-enter-active,
        .v-leave-active{
          transition:opacity 1s;
        }
      </style>

      ...
      <transition>
        <div v-if="show">hello</div>
      </transition>
	
	
## 5-2 在 Vue 中使用 Animate.css 库

在 animate.css 官网下载库文件,引入到代码中，就可以使用官网提供的一系列动画效果。

> 网址如下：[Animate 官网](https://daneden.github.io/animate.css/)

	<transition
	  appear
	  enter-active-class="animated swing"
	  leave-active-class="animated shake"
	  appear-active-class="animated swing">
		<div v-show="show">hello</div>
	</transition>
	
	
## 5-3 在 Vue 中同时使用过渡和动画

animated 的默认动画执行时间是 1 秒，而我们自己定义的动画可能不是 1 秒，那么此时以哪个时长为准呢？用以下三种方式定义，任选其一即可。


	<style>
		.fade-enter,
		.fade-leave-to{
			opacity:0;
		}
		.fade-enter-active,
		.fade-leave-active{
			transition:opacity 3s;
		}
	</style>

	...
	<transition
	type="transition"  //方式一 设置为我们自己的动画时长为准
	:duration = "5000" //方式二 设置固定的时长
	:duration="{enter:5000,leave:10000}"  //方式三 设置不同的出入场时间
	  name="fade"
	  appear
	  enter-active-class="animated swing"
	  leave-active-class="animated shake"
	  appear-active-class="animated swing">
		<div v-show="show">hello</div>
	</transition>
	
	
## 5-4 Vue 中的 Js 动画与 Velocity.js 的结合

 Velocity.js 的作用跟 animated 类似，同样是加入动画效果。
 
>网址如下  [Velocity 官网](http://www.velocityjs.org/)

	<transition
		  name="fade"
		  @before-enter="handleBeforeEnter"
		  @enter="handleEnter"
		  @After-enter="handleAfterEnter"
		  >
			<div v-show="show">hello</div>
	</transition>

	...

	/* Vue 实例中的 method*/

	methods:{
		handleBeforeEnter:function(el){
			el.style.opacity = 0;
		},
		handleEnter:function(el,done){  //此处使用 Velocity
			Velocity(
				el,
				{opacity:1},
				{duration:1000,complete:done}
			)
		},
		handleAfterEnter:function(el){
			console.log("动画结束")
		}
	}
	
## 5-5 Vue 中多个元素或组件的过渡动画

在 transition 标签中加入多个元素时，可以通过设置  mode="out-in" 属性，可以设置移出和移入过渡效果(即动画的先后顺序)。

多个组件间的动画切换，主要通过 is 属性切换组件名，从而触发切换动画


## 5-6 Vue 的列表过渡动画

通过 transition-group 标签为列表项添加动画

	<transition-group>
		<div v-for="item of list" :key="item.id"></div>
	</transition-group>
	
	
## 5-7 Vue 中的动画封装

将整个 transition 写到 template 里面，通过调用组件的方式，直接附带动画效果

	<fade :show="show">
		<div> hello world </div>
	</fade>

	...

	Vue.component('fade',{
		props:['show'],
		template:'
			<transition
			  @before-enter="handleBeforeEnter"
			  @enter="handleEnter"
			  @After-enter>
				<slot v-if="show">hello</slot>
		</transition>',
		methods:{
			handleBeforeEnter:function(el){
				el.style.color = 'red';
			},
			handleEnter:function(el,done){  
				setTimeout( =>{
					el.style.color = 'green'
					done()    //要手动调用 done 函数
				},2000)
			},
			handleAfterEnter:function(el){
				console.log("动画结束")
			}
		}
	})
	
	
## 5-8 总结

还有 **动态过渡** 效果  和 **状态过渡** 效果，后面可以根据官方文档做具体深入了解。

# 第六部分

## 6-1 配置项目

1. 安装 node.js ，直接官网下载安装
2. 码云创建 Travel 仓库 
3. 安装 git
4. 生成电脑的公钥，[教程地址](https://gitee.com/help/articles/4181#article-header0)
	- 右键  git bash 打开命令窗口
	- 输入命令   ssh-keygen -t rsa -C "xxxxx@xxxxx.com"  ,三次回车，直接到相应目录下找到 id_rsa.pub ，打开复制到 git 相应地方
	- 然后到项目文件夹中，打开 win 命令行， git clone git@gitee.com:jinPengStudio/Travel.git
	- 若出现 permission denied ,则参考[这个网址](https://www.jianshu.com/p/be7e4eb50f2f)

5. 安装 vue-cli 框架，执行命令  npm install --global vue-cli
6. 切换到项目目录下，执行命令  vue init webpack projectName
	- 编译方式 ：runtime + Compiler（运行时或编译时）； runtime-only（仅运行时）
	- 是否安装 vue-router ：是
	- 是否 用 ESlint 检查  ：是
	- 是否 unit 单元测试：否
	- 是否 E2E 测试：否
	- 包管理方式使用 npm 还是 Yarn ：npm
	- 等待下载，Project initialization finished !
	- cd Travel
	- npm run dev  （若出错，参考如下[网址](https://www.cnblogs.com/shenhaha520/p/9014150.html)）


## 6-2 项目中的目录作用介绍

main.js 是整个项目的入口文件

## 6-3 单文件组件与 Vue 中的路由

路由：根据网址的不同，返回不同的内容给用户

<router-view/> 显示的是当前路由地址所对应的内容


## 6-4 多页应用 VS 单页应用

**多页应用特点**
- 每次跳转都要请求，所以首屏时间快
- 搜索引擎优化（SEO）效果好
- 如果网络慢，在页面跳转时会比较慢

**单页应用**
- 首次跳转请求所有数据，所以首屏时间慢
- 搜索引擎优化（SEO）效果差，搜索引擎不识别 js 中的内容
- 页面跳转不需要请求网络，页面跳转快

## 6-5 项目代码初始化

- 增加移动端特性，缩放无效，比例为 1

		,minimum-scale=1.0
		,maximum-scale=1.0
		,user-scalable=no"
		
		
- 引入 reset.css ，保证各个浏览器效果一样
- 引入 border.css ，保证移动端边框效果适配
- 引入 fastclick 包，保证移动端点击事件没有延迟,解决移动端 300 毫秒的延时问题，使用如下代码导入：

      //1. 命令行到项目目录下，执行
      npm install fastclick --save
      
      //2. main.js 中导入
      import fastClick from 'fastclick'
      
      //3. main.js 中声明
      fastClick.attach(document.body)
	
	
## 7-1 首页制作

**安装 stylus ，方便快捷的书写 css 样式**

    //1. 安装 stylus
    npm install stylus --save
    
    //2. 安装 stylus-loader
    npm install stylus-loader --save
  
  
  用 scoped 关键字让样式只对本页面有效
  
**在 build -> webpack.base.conf.js -> resolve -> alias 下定义自定义路径，方便项目中的资源导入**
  
    // 修改前的导入方式
    @import '../../../assets/styles/varibles.styl'
    
    //修改后的导入方式
    @import '~styles/varibles.styl'
    
    
注意： 修改玩 webpack 配置项之后，一定要重启才能生效
    
**安装 swiper 实现轮播图效果**
    
    npm install vue-awesome-swiper@2.6.7 --save


**git 操作实例**

提交 swiper 功能代码，并合并到主分支上

    git add *
    git commit -m "swiper complete"
    git push
    git checkout master
    git merge index-swiper
    git push
  
**查看页面元素对应的数据**

  安装 chrome 插件 vue.js devtools  用于查看页面元素对应的数据

**安装 axios 网络请求框架**

进行 ajax 网络数据请求，使用 axios 框架进行：

  npm install axios --save
  

**安装 better-scroll 插件，用于城市列表的滚动展示**

  npm install better-scroll --save
  
**其他**

对象也可以使用 v-for 循环

通过监听页面元素的值来控制页面的显示和隐藏


## Vuex 实现数据操作

Vuex 的数据操作流程图

![](src/assets/1.jpg)

安装 Vuex 

      npm install vuex --save
  
- 新建 store.js 声明文件，对 state、action、mutation 作声明，如下代码示例（city 就是数据名）：


      import Vue from 'vue'
      import Vuex from 'vuex'

      Vue.use(Vuex)

      export default new Vuex.Store({
        state: {
          city: '测试'
        },
        actions: {
          changeCityAction (context, city) {
            context.commit('changeCityMutation', city)
          }
        },
        mutations: {
          changeCityMutation (state, city) {
            state.city = city
          }
        }
      })



- 在相应的数据调用处，直接使用  **this.$store.state.city** 来引用数据
- 如果要修改 state 中存储的数据，使用如下方法
      this.$store.dispatch('changeCityAction', city)
      this.$store.commit('changeCityMutation', city)  //此方法省略了 action 的步骤，直接调用 mutation 也可以
      
      
## 使用路由控制页面跳转（router）

    this.$router.push('/')
    
    
## Vuex 的一些高级用法

用 mapState 简化本地 state 数据的调用


    <script>
    import { mapState } from 'vuex'
    export default {
      computed: {
        // 方法一 将 存储的 city 映射到 computed 中的 city
        // ...mapState(['city'])
        // 方法二 将 存储的 city 映射到 computed 中的 currentCity
        // ...mapState({
        //   currentCity: 'city'
        // })
      }
    }
    </script>
    
    
另外，也有 mutation、getter 等用法，具体去官网


## 使用 iconfont 中的图标库

- 从购物车中将图标添加至我的项目，然后下载至本地

- 复制 iconfont.eot 、 iconfont.svg 、 iconfont.ttf 、 iconfont.woff 文件到资源目录下

- 方式一，替换 iconfont.css 第四行，即替换编码方式，适用于第二次使用 iconfont.css 文件时，比如    url('data:application/x-font-woff2;charset=utf-8;base64

- 方式二，直接将下载好的 iconfont.css 文件复制到资源目录下，但要修改图标所对应的目录，比如    url('./iconfont/iconfont.woff?t=1561968816383')

**其他**

用 exclude 标签排除不需要使用缓存的页面

解决浏览器不支持 promis 的协议出现的白屏情况，需要安装 babel-polyfill 插件

      npm install babel-polyfill --save
  
  
打包整个 vue 项目

      npm run build
  
将打包好的 dist 文件夹里面的东西，复制到服务器根目录下即可。
  
## 配置服务器地址表

修改 config -> index.js 文件

    proxyTable: {
      // 此处是将 '/static/mook' 目录替换成 '/api' 目录，使用代理的方式替换地址
      // 到时候在测试服务器和正式服务器转换时，直接调整这里配置项就可以
      // 记住修改完配置项，一定要重启后才能生效
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mook'
        }
      }
    }
    
## 通过 IP 访问项目

找到项目根目录下的 package.json 文件，修改 scripts 下的

    // 添加 --host 0.0.0.0 这个代码 ，让本项目可以通过 IP 地址来访问
    // "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    // 原本的代码如下：
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    
    
## 配置服务器端运行项目的根目录

修改 config -> index.js 文件

    assetsPublicPath: '/', //打包的项目将要在服务器端运行的目录路径
  
  
## 打包后生成的文件
.js.map 文件主要是用于调试，不用管
.js 文件主要有三种  

- app.js         ：主要的页面代码，项目的业务逻辑代码
- manifest.js    ：项目的配置项
- vender.js      ：各个页面、组件公用的代码

## 配置异步加载

修改 router -> index.js 文件，将原来在 Home 页面加载所有页面数据的形式，修改为跳转到各个页面时，再各自加载的形式。

使用异步加载的项目至少需要在 MB 级别以上，不然的话，多次的网络请求反而降低了程序性能

      // 异步加载测试部分
      // 原来的代码，需要一个个导入组件
      //   routes: [
      //   {
      //     path: '/',
      //     name: 'Home',
      //     component: Home
      //   }, {
      //     path: '/city',
      //     name: 'City',
      //     component: City
      //   }, {
      //     path: '/detail/:id', // 动态路由
      //     name: 'Detail',
      //     component: Detail
      //   }
      // ],
      // 改后的代码，不需要在上面导入，直接在组件名称处导入
      routes: [
        {
          path: '/',
          name: 'Home',
          component: () => import('@/pages/home/Home')
        }, {
          path: '/city',
          name: 'City',
          component: () => import('@/pages/city/City')
        }, {
          path: '/detail/:id', // 动态路由
          name: 'Detail',
          component: () => import('@/pages/detail/Detail')
        }
      ]