2018/11/25 Vue 2.9.x 脚手架搭建

今日总结：

1. 用Velocity.js 实现JS动画
2. Vue 开发环境准备以及脚手架搭建
3. Vs code 的 ESLint 配置
4. 多页应用与单页应用区别
5. 防止图片没加载完后续内容受到抖动的影响

用Velocity.js 实现JS动画

1.用Velocity.js 实现JS动画

Transition 组件上绑定一个事件
绑定一个函数
动画即将显示之前：@before-enter="handleBeforeEnter" 参数 ： el  当前元素节点
动画显示过程：@enter 绑定一个函数 参数：el  done done函数在动画结束后调用
动画显示后：@after-enter 绑定一个函数  参数：el
动画离开钩子  @before-leave  @leave @after-leave 同理

2.Vue 中多个元素或组件的过渡
用transition包裹多个组件，
可以使用mode="in-out"/out-in 代表切换的元素是先进入，之前的元素后退出，还是之前的元素先退出，切换的的元素后进入。

3.transition-group 组件包裹其他列表组件 可以实现列表的过滤
4.动画组件的封装

Vue开发环境准备

1、nodeJS、npm
2、开发码云仓库
3、绑定SSH key 公钥

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"  
cat ~/.ssh/id_rsa.pub

来自 https://gitee.com/help/articles/4181#article-header0
4.git clone 克隆项目SSH地址
5.安装vue 2.0 脚手架

npm install -g vue-cli

来自 https://github.com/vuejs/vue-cli/tree/v2#vue-cli--

npm init webpack 文件夹

回车输入y/n
最后安装的时间可能会比较长
 
cd 文件夹  
启动  npm run dev
浏览器输入 localhost:8080 

6、创建开发分支，创建个人分支 步骤可查阅博客中git分支流程总结
7、项目目录文件

-- build                     目录放的是构建脚本（包括构建时要用到的webpack配置）

-- config                    配置脚本（vue项目启动时需要的配置，开发模式和生产模式）

-- node_modules              通过npm install 安装的项目依赖包

-- src                       项目源码目录

     -- assets                 项目模块资源文件包括：图片，css（会被webpack处理）

     -- components             项目相关的vue组件，便于重用

     -- router                 项目的路由定义

        App.vue                页面入口文件

        main.js                项目的入口文件，挂在vue实例，加载路由，中间件等公共组件

-- static                    页面需要引入的外部的纯静态资源(会直接拷贝到dist/static/里面)

-- test                      项目测试

	-- e2e                    模拟用户行为的测试
	
	-- unit                   单元测试
	
.babelrc                     ES6语法编译配置,把我们ES2105的代码通过它编译成ES5的

.editorconfig                编辑器配置，定义代码格式

.eslintignore                忽略语法检查的目录文件配置

.eslintrc.js                 eslint的配置文件

.gitignore                   配置Git仓库的忽略项

.postcssrc.js                postcss的配置

index.html                   项目入口模板文件

package.json                 项目基本信息，运行脚本和相关依赖

README.md                    项目介绍及开发指南

vscode代码保存时自动格式化成ESLint风格（支持VUE）

来自 <http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html>

如果你们觉得eslint的很多提示干扰你们的开发，可以关掉，config/index.js第25行，改成false

多页应用与单页应用

多页应用：页面跳转-返回HTML
优点：首屏时间快，SEO效果好
缺点：多个页面之间来回切换慢 因为会创建多个http请求

单页应用：vue中使用router-link标签跳转 react中使用 Link 标签跳转
页面跳转-JS渲染
优点：多个页面之间切换快
缺点：首屏时间稍慢，SEO差

项目代码文件的初始化

在main.js文件或index.html 文件里引入

1. 引用重置样式表

2. 引入移动端1px边框的兼容样式表

3. 引入移动端点击事件300毫秒延迟兼容JS npm install fastclick --save --save意思保存在开发环境和生产环境中都能使用

4. 注册 iconfont ，创建自己项目图标库

5. 安装stylus npm install stylus --save-dev npm install stylus-loader --save-dev思想与less 和sass 差不多

6. stylus: 组件里的样式限制，不会污染其他组件样式 <style lang="stylus" scoped>

7. 根 html font-size：12px 其余不设置字体为14px 即 1.2rem

给常用的目录设置别名 修改完要重启

@ 等src目录 styles 等于src下的styles目录

注意：在css中用@import引入其他的css文件，如果都使用了@ 或其他别名 符号，那么在后者引用的@的前面加上 ~线

如：@import '~@/assets/styles/xxx.css'
@import '~styles/assets/styles/xxx.css 等

8. 安装 vue-awesome-swiper 第三方轮播插件npm install vue-awesome-swiper@2.6.7 --save 并在main.js 中引入它

防止图片没加载完后续内容受到抖动的影响

图片没有加载出来时：

当加载出来时后续内容会突然下降造成抖动的bug

可以在图片外层加一个div 添加如下样式

{
	overflow：hidden;
	width：100%;
	height：0;
	padding-bottom：图片的 宽/高 百分比;
}

这样写的意思是，它的高度是wrapper宽度的31.25% 确保在不同分别率下能实现自适应。否则直接写在height里不能实现自适应
这样在图片没有加载完成之前它还是占据了一定的空间

就可以防止后续的内容发生突然抖动下滑的体验