第十六周学习笔记和总结

这周主要熟悉 vue 项目开发流程（找工作好辛苦哦，都没人理 ┭┮﹏┭┮）。

一、 vue 脚手架命令行工具

1. 全局安装 vue-cli （$ npm install vue-cli -g），作用是创建一个 vue 工程模板；
2. $ vue init webpack study-vue 创建一个项目。

二、 单文件组件

就是一个文件里面写了一个自定义 html 组件，以 .vue 结尾，由、 和 构成，在前端开发中会把页面分成一个个单文件组件构成。

   // 给这个组件设置 css  样式

三、 单页应用和多页应用

1. 多页应用

每切换一次页面或路由，都会向服务端发送一次请求，然后由服务端返回数据；

• 优点： 首次加载页面速度快；
• 缺点：页面与页面间跳转速度慢。

2. 单页应用

切换页面或路由，不需要向服务端发送请求，直接通过 js 进行渲染；

• 优点： 首次加载页面速度慢；
• 缺点：页面与页面间跳转速度快。

四、 移动端处理

1. 控制网页在移动端的大小

• width=device-width 宽度等于设备宽度
• initial-scale=1.0 网页初始化大小是1
• minimum-scale=1.0 在手机缩放网页最小比例为1.0
• maximum-scale=1.0 在手机缩放网页最大比例为1.0
• user-scalable=no 用户不能缩放

2. 处理不同手机样式兼容问题

不同手机，对 html 的样式处理是不一样的，reset.css 可以统一样式。

3. 处理二倍屏三倍屏的问题

不同手机的分辨率不一样，存在二倍屏、三倍屏，显示的边框不一样，border.css 是在不同手机下显示的边框是统一的。

4. 处理手机点击延迟问题

在移动端点击链接会有300毫秒的延迟，通过 fastclick 处理延迟问题，首先要安装 $ npm install fastclick --save，在代码中使用：fastClick.attach(document.body);。

五、Stylus：CSS 预处理器

CSS 预处理器不止有 stylus、还有 less、sass 等等。
共同点：都能将符合自己语法的代码翻译成 css 代码，不同点是各自的语法不一样；

普通 css 文件长什么样子：xxxx.css
stylus预处理文件长什么样子：xxx.styl
less预处理文件长什么样子：xxxx.less

1. css 预处理器详情；

2. 在 vue 中用法

使用前先安装 stylus：$ npm install stylus stylus-loader

    

        hello world!
    

2. em

em 是相对父级元素的 font-size 计算尺寸的;如下示例：span 的 font-size=10px*1.6=16px。

    hello world!

七、Iconfont 图标

（http://www.iconfont.cn/）

先注册把需要的图片下载到本地，然后把里面的 iconfont.css文件和 iconfont 字体文件移入本地项目中，并根据本地项目中的路径改变iconfont.css每个字体的路径；

在代码中使用：

 

          //可以官网上直接复制代码
 

八、轮播组件

vue 社区里轮播组件：vue-awesome-swiper：
https://github.com/surmon-china/vue-awesome-swiper

九、其它

1. vue 里特殊写法

:options="swiperOption" 是 v-bind:options="swiperOption" 的简写
@someSwiperEvent="callback" 是 v-on:click="callback" 的简写

2. css 宽高比写法

div 只知道宽度，高度根据宽度的百分比设置写法：

width: 100%;
height: 0;
padding-bottom: 37%;
overflow: hidden;

3. git 补充

• git checkout ：切换分支；
• git merge ：合并分支；
• git branch：查看本地git仓库有哪些分支；
• git branch -d ：删除分支。