Vue小坑之路

基于vue-cli 3.11.0

1，vue 格式化保存后，单引号自动变双引号 ，导致和eslint不一致，总是提示Strings must use singlequote (quotes) at；

解决方案：搜索，在setting.json中添加，

  "prettier.semi": false,
  "prettier.singleQuote": true,

2、 Newline required at end of file but not found (eol-last) 

解决方案：编辑器是想换行，但是无法往下走（写完一行代码后，自己敲个回车，让光标多走一行）

3、对于tab和空格占有的位置符，需要在eslint设置，否则无法查看两者区别，报错后难找问题，在rules添加 

 'no-tabs': 0,  'indent': 0,

4、.sty文件未高亮  需要安装stylus插件；stylus css未高亮 需要去 首先项-设置-打开setting.json，添加

	 "files.associations": {
		".vue": "html",
		"*.vue": "vue"
		},

5、./commom/css/reset.css样式，不能在public下index.html里引入，可直接在main.js内import引入，或者把css放在public下

6、vue2.6.10,购物车按钮复合动画

	<transition name="fade">
		<div class="cart-decrease" v-show="food.count>0" 
            @click.stop.prevent="cartDescrease">
			<i class="fa fa-minus-circle" aria-hidden="true"></i>
		</div>
	</transition>

		.cart-decrease, .cart-add
			display inline-block
			padding 6px
			color rgb(0,160,220)
			font-size 24px
			line-height 24px
			&.fade-enter-active, &.fade-leave-active // 进入动画的状态/离开动画的状态
				transition all 0.4s linear // all 0 ease 0 --all=所有属性 0=持续 ease=动画类
              型  0=延迟多久出现动画
				opacity 1 // 透明度
				transform translate3d(0,0,0) rotate(0) // 动画方法很多  平移 缩放 旋转(3D可开
            启硬件加速）
			&.fade-enter, &.fade-leave-to  /* .fade-leave-active below version 2.1.8 */ 
				opacity 0
				transform translate3d(24px,0,0) rotate(180deg)

7、css不起作用的时候，查看元素也没显示出来 ，就认真细心检测html标签 层级结构，css的层级结构，尤其注意相邻类名的空格问题 

	<img :src="food.image" >
		background blue
		&.fade-enter-active, &.fade-leave-active //&前没空格切记
			transition all 0.3s linear
			transform translate3d(0,0,0,)
		&.fade-enter, &.fade-leave-to
			transform translate3d(100%,0,0)
		.image-header
			position relative
			width 100%
			height 0
			padding-top 100%
			background red
			img // 标签直接使用标签名  而非.标签名 
				position absolute
				top 0
				left 0
				width 100%
				height 80%

终于利用空闲时间，搞定饿了么，收货不小，要学习的东西还很多， 项目源码 https://github.com/daitu-liang/sell

vue2.6.10 + vue-router3.1.3 + better-scroll2.0.0-beta.2 + vue-resource1.5.1 + vue-cli3.11.0+stylus 观看饿了么视频学习写的项目，视频基于vue1.0的，自己是基于2.6.10，采用Visual Studio Codek工具开发，敲代码的过程由于版本不一样，注意差异点； 分支v1.0.0中 前面商品模块代码照着视频敲了，后面评论和商家自己敲了，但功能都按视频一样实现了；图标采用Font Awesome；