去哪儿APP vue 2.X —— 开发笔记（一）

吃了一天糖葫芦
159 阅读5分钟

1 初始化项目——CLI工具构建项目

  • 全局安装 vue-cli
    npm install --global vue-cli
  • 创建一个基于webpack的模板项目
    vue init webpack my-project
  • 安装依赖
    cd my-project
    npm install
    npm run dev

2 git基操

  • 把所有文件增加到本地的git缓冲区

    git add .

  • 提交并写message

    git commit -m 'project init'

  • 推到GitHub

    git push

3 项目代码结构

  • package.json 依赖包
  • package-lock.json package的一个锁文件 确定第三方包的具体版本 保证团队编程的统一
  • LIENSE 开源协议的说明
  • index.html 项目默认的首页模板文件
  • .gitignore有些比较特殊的文件不需要传到代码仓库里
  • eslintrc.js对代码做检测
  • eslintignore 哪些文件不受eslintd的代码规范检测
  • editconfig 配置编辑器里的一些语法 如indent_size = 2表示点击tab是两个空格的缩进
  • babelrc vue单文件组件的写法需要通过babel这种语法解析器做语法上的转换，最终转换成浏览器能够编译执行的代码。
  • static 目录放置静态资源
  • node_moudules 项目依赖的第三方包
  • src 源代码
    • main.js 项目入口文件
    • APP.js 根组件
    • router
      • index.js 项目里的所有路由
    • component 项目里用到的小组件
    • assets 项目里用到的图片类的资源
  • config 项目配置文件
    • index.js 基础配置信息
    • dev.env.js 开发环境配置信息
    • prod.env.js 线上环境配置信息
  • build 项目打包的信息

    • webpack.base.conf.js webpack配置项

    • webpack.dev.conf.js 开发环境webpack配置项

    • webpack.prod.conf.js 线上环境webpack配置项

4 Vue中的单文件组件和Vue中的路由

4.1 入口文件

image.png

4.2 单文件组件

App.vue

  • template
  • script
  • style image.png

4.3 路由

路由就是根据网址url的不同，返回不同的内容页面给用户。

  • router-view显示的是当前路由地址所对应的内容： image.png tempsnip.png

  • 在根组件的模板中引入<router-view>标签，router-view显示的是当前路由地址所对应的内容，路由地址和单文件组件的配置项在router文件夹下，被main.js入口文件所引用，并在根组件实例中被设置。 image.png

5 多页面应用VS单页面应用

Chrom控制台-->Network-->Doc，每次页面跳转，后台都会返回一个对应的html文档

5.1 多页面应用

image.png

  • 优点
    • 页面首个屏幕内容展现出来的时间快，访问一个页面，服务器给用户返回一个HTML文档，然后经过渲染被展示出来，这个过程只经历了一个http请求，比较快。
    • 搜索引擎优化效果非常好，搜索引擎做网页排名的时候，能识别网页html内容，才能给网页权重，因此多页应用网页排名效果更好。
  • 缺点
    • 每次切换，都要发送一次http请求。

5.2 单页面应用

image.png

Vue写的项目是单页面应用。每次页面跳转，不会再发送http请求了。路由不是用后端做页面跳转，是用前端做页面跳转，JS能识别url变化并且动态地把当前页面内容清除掉，把下一个页面内容渲染到页面上来。

  • 缺点：搜索引擎优化效果不好。搜索引擎只认识HTML内容，不认识js内容。那么为什么vue要用开发单页面应用··，因为vue中还有服务器渲染等功能，可以解决网页排名的问题。

6 去哪儿

6.1

移动端配置

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

在main.js中import引入：

  • reset.css文件。对基础样式的修饰。
  • border.css文件，用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。
  • 引入fastclick库三百毫秒点击延迟问题： 
    npm install fastclick --save
    --save不管是开发环境之中，还是打包生成的线上版本，都需要fastclick。

iconfont

6.2 首页header开发

（1）stylus css开发工具方便快速编写代码

 cnpm install stylus --save
 cnpm install stylus-loader --save

（注意版本兼容问题）

（2）header分三部分组成：

  • header-left
  • header-input
  • header-right

（3）单位确认

移动端布局一般采用单位rem。rem数值的确认，与设计稿和html的font-size有关。

  • 1rem = html font-size = （本项目reset.css中为）50px：
  • header高为86px-->2倍屏幕（设计稿）：header设置为43px-->转换为rem：.86rem

（4）iconfont的引入

  • inconfont图标库下载代码
  • 代码引入和修改
    • main.js 入口文件引入inconfont.css模块
    • iconfont.css
      • 修改图标url
      • 删除不必要代码
<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      输入城市景点/游玩/主题
    </div>
    <div class="header-right">城市<span class="iconfont arrow-icon">&#xe600;</span></div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>
<style lang="stylus" scoped>
  .header
    line-height: .86rem
    display: flex
    background: #00bcd4
    color: #fff
    .header-left
      width: .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      min-width: 1.04rem//😀使用min-width为了兼容不同的城市名字长度
      padding: 0 .1rem
      float: right
      text-align: center
      .arrow-icon
        font-size: .24rem
</style>

注

  • text-align: center写在span内是无法实现居中的
    • 理解为内联元素仅有内容，没有填充。
    • margin: 0 auto 也不能在内联元素中使用，内联元素宽度由内容多少决定的，auto不能设置水平居中。但margin设置左右可以使用，要想上下也有反应的话，可将内联转化为块状元素。padding对于内联元素左右也有效果。

改进

  • 改进（1）：设置全局样式变量 统一管理样式
    • 本项目用的是stylus，创建全局变量variable.styl文件，并设置全局变量
    • 组件样式中import variable.styl
  • 改进（2）：webpack中设置路径别名，简化路径长度
    • 在script中引入，路径src别名为@
    • 在style中引入，路径src别名为~@,import前要加@
    • 在webpack.base.conf.js中可增加常用路径的别名，设置好后要重启服务器。
avatar
文章
阅读
粉丝