Vue开发去哪儿webapp项目笔记

项目环境准备

安装node.js(命令行输入$ node -v $ npm -v 能正确显示版本号就说明安装成功了)
注册码云账号(代码托管平台，多人协同开发)
安装Git (命令行输入$ git --version能正确显示版本号就说明安装成功了)
生成并添加SSH公钥(码云的公钥和本地的私钥配对打通线上线下)：帮助文档
克隆仓库项目到本地
Vue项目创建
- 安装vue-cli并创建项目：
  老版本cli文档
   新版本cli文档
- 同步到远程库：
  1
  2
  3
  4
  git status
  git add .
  git commint -m "第一次提交"
  git push

项目结构介绍

项目代码初始化

meta标签设置

1	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

main.js中引入reset.css
- 目的：重置页面样式import './assets/styles/reset.css'
  
  因为在不同移动端、不同浏览器上页面的初始样式是不一样的，引入reset.css为了保证在每个浏览器上展示出的初始效果是一样的
main.js中引入border.css
- 目的：解决移动端1像素边框问题import './assets/styles/border.css'
项目中安装fastclick
- 目的：解决移动端300ms延迟问题
  1
  npm install fastclick --save
- 使用：在main.js引入fastclickimport fastClick from 'fastclick';main.js中写入fastClick.attach(document.body)

项目中安装stylus

目的：快速的编写css样式

1 2	npm install stylus --save npm install stylus-loader --save

项目插件的使用

vue-awesome-swiper

install：

1	npm install vue-awesome-swiper@2.6.7 --save

Global Registration:

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

遇到的问题：

图片未加载的时候高度为0，用户网络不好的情况下页面会有明显抖动感；

解决方法：在swiper标签外层加一个div并1.设置宽高来占位；2.自身高宽比（640*200pixels->高宽比为0.3125）{overflow: hidden;width:100%;height:0;padding-bottom:31.25%;}或{width:100%;height:31.25vw;}；后者兼容性不好。
修改ui组件样式不成功

解决方法：使用样式穿透>>>或>>>的别名/deep/,不受scoped限制

项目难点

项目中遇到的问题及解决方案

项目笔记

分支开发

企业开发流程中一个功能一个分支，功能开发完成再合并到master主分支

创建并切换分支

命令行：

# 创建分支
git branch index-swiper
# 推送本地分支到远程库
git push --set-upstream origin index-swiper
# 查看分支
git branch
# 切换分支
git checkout index-swiper
# 创建并切换分支
git checkout -b <branchName>

gitee:新建分支index-swiper提交->git pull->git checkout index-swiper

功能开发完成提交并合并分支

git add .
git commit -m 'index-swiper done'
git push
git checkout master
git merge origin/index-swiper
git push

多页应用vs单页应用

多页应用（页面跳转->返回html文件）
- 优点：
  首屏时间快（只经历一次http请求），seo效果好
- 缺点：
  页面切换慢（每次跳转都要发起http请求）
单页应用（页面跳转->js渲染）
- 优点：
  页面切换快（不用http请求，js控制dom渲染）
- 缺点（可用服务器端渲染解决）：
  首屏时间慢（请求一次html；一次js），seo差

Iconfont的使用

将要用的iconfont加入到我的项目里；下载本地解压缩。
将字体文件（.eot .svg .ttf .woff .woff2）拿到assets/styles/iconfont目录下
将iconfont.css放在assets/styles目录下
打开iconfont.css文件，修改路径,加上 ./iconfont/
main.js中引入iconfont.cssimport './assets/styles/iconfont.css'
完成，开始使用吧。eg:<span class="iconfont"></span>

stylus全局变量

创建varibles.styl文件存放全局变量，声明全局变量。eg:$bgColor = green
引入varibles.styl即可使用；eg:@import '~@/assets/styles/varibles.styl'使用全局变量background-color:$bgColor（在main.js中文件引用路径中的@代表src目录，在style中~@代表src目录）

webpack.base.conf.js设置文件别名

修改了webpack配置项后要重启服务才能生效

{
    alias:{
        '@': resolve('src'),
        'styles': resolve('src/assets/styles')
    }
}

项目地址

去哪儿网官方网站