这周主要熟悉 vue 项目开发流程（找工作好辛苦哦，都没人理 ┭┮﹏┭┮）。
一、 vue 脚手架命令行工具
- 全局安装 vue-cli （
$ npm install vue-cli -g），作用是创建一个 vue 工程模板； -
$ vue init webpack study-vue创建一个项目。
二、 单文件组件
就是一个文件里面写了一个自定义 html 组件，以 .vue 结尾，由<template></template>、<script></script> 和 <style></style> 构成，在前端开发中会把页面分成一个个单文件组件构成。
<template> // 写 html ，这个组件的功能
<div>
<HomeHeader></HomeHeader> // 单文件组件
<HomeSwiper></HomeSwiper> // 单文件组件
<HomeIcons></HomeIcons> // 单文件组件
</div>
</template>
<script> // 写js
import HomeHeader from './components/Header'; // 引入其他单文件组件
import HomeSwiper from './components/Swiper'; // 引入其他单文件组件
import HomeIcons from './components/Icons'; // 引入其他单文件组件
export default {
name: 'Home', // 这个组件的名字
components: {
HomeHeader, // 组件的名字
HomeSwiper, // 组件的名字
HomeIcons,
},
};
</script>
<style scoped></style> // 给这个组件设置 css 样式
三、 单页应用和多页应用
1. 多页应用
每切换一次页面或路由，都会向服务端发送一次请求，然后由服务端返回数据；
- 优点： 首次加载页面速度快；
- 缺点：页面与页面间跳转速度慢。
2. 单页应用
切换页面或路由，不需要向服务端发送请求，直接通过 js 进行渲染；
- 优点： 首次加载页面速度慢；
- 缺点：页面与页面间跳转速度快。
四、 移动端处理
1. 控制网页在移动端的大小
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
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
<style lang="stylus" scoped>
lang="stylus" 表示 CSS 预处理器用 stylus，scoped 表示样式只对当前.vue 文件有效。
六、rem 和 em
1. rem
rem 是相对根元素 html 的 font-size 计算尺寸的;如下示例：span 的 font-size=20 px * 1.6 rem =32px。
<html lang="en">
<head>
<style>
html {
font-size: 20px;
}
div {
font-size: 10px;
}
span {
font-size: 1.6 rem;
}
</style>
</head>
<body>
<div>
<span>hello world!</span>
</div>
</body>
</html>
2. em
em 是相对父级元素的 font-size 计算尺寸的;如下示例：span 的 font-size=10px*1.6=16px。
<style>
div {
font-size: 10px;
}
span {
font-size: 1.6em;
}
</style>
<div>
<span>hello world!</span>
</div>
七、Iconfont 图标
先注册把需要的图片下载到本地，然后把里面的 iconfont.css文件和 iconfont 字体文件移入本地项目中，并根据本地项目中的路径改变iconfont.css每个字体的路径；
在代码中使用：
<div class="left">
<span class="iconfont"></span> //可以官网上直接复制代码
</div>
八、轮播组件
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 <branchName>：切换分支； -
git merge <branchName>：合并分支； -
git branch：查看本地git仓库有哪些分支； -
git branch -d <branchName>：删除分支。
