记录项目的完整流程

踩坑

./index.css表示同级文件夹下的index.css
给body和html同时添加overflow:hidden;height:100%可以阻止弹出层滚动

watch:{
	popSeen(newVal,oldVal){//监听popSeen的变化
		document.body.style.overflow = newVal ? 'hidden' : 'auto';
		document.querySelector('html').style.overflow = newVal ? 'hidden' : 'auto';
		document.body.style.height = newVal ? '100%' : 'auto';
		document.querySelector('html').style.height = newVal ? '100%' : 'auto';
}

{}、[]是true值，因为{}、[]都是对象，所有的对象都是true值
:class="{'active':list.length}",在开发模式下,active没有单引号不报错，但是打包时就会报错！【active不加单引号，就表示是data里面的变量active】
<a href="/abc.html">的路径是github.io/abc.html,<a href="abc.html">和<a href="./abc.html">的路径是github.io/vue-youzan/abc.html

开发流程

项目经理 –> UI设计师 –> 后端接口

github搜索

搜索stars:>10000就能搜索出star数大于1w的项目

接口管理平台

rapapi、easy-mock等

配合mock生成随机数据

根据mock文档，结合接口管理平台，生成随机数据

使用nrm切换镜像仓库

github:nrm

安装nrm

npm install -g nrm

使用nrm

nrm:https://github.com/Pana/nrm

nrm ls:查看有哪些镜像仓库
nrm test：测试速度
nrm use taobao：使用taobao镜像

vue-cli

github:vue-cli
vue-cli中文文档

安装vue-cli

1
2
3

npm i vue-cli -g //全局安装一次，之后就可以用vue命令了
目前2.9.4有bug，暂时用2.9.3
npm i vue-cli@2.9.3 -g

//TBOOK
C:\Users\stage\AppData\Roaming\npm\vue-init -> C:\Users\stage\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\stage\AppData\Roaming\npm\vue-list -> C:\Users\stage\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\stage\AppData\Roaming\npm\vue -> C:\Users\stage\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
+ vue-cli@2.9.4

static和src/assets的区别

static里的内容不会处理，比如ico放入这个文件夹，然后在html里面引入
src/assets里的静态文件(js,css,图片)会被处理,比如图片转换成base64

用yarn创建项目

webpack模板

yarn global add vue-cli
vue init webpack youzan
yarn
npm run dev
npm run build

多页面mpa调整

https://github.com/tonyfree/blog/issues/1

vue生命周期

beforeCreate

vue的实例还没创建出来，此时拿不到data和methods

created

此时vue实例创建完成
在created(){}阶段，可以拿到this（即vue实例），此时可以处理vue实例下的data和methods了

data:{
	id:0,
},
created(){
	axios.get('https://www.xxx.com').then(res=>{
		this.id = res.id;
	})
}

此时还没有挂载到DOM，所以暂时获取不到DOM节点

DNS预解析

1	<link rel=dns-prefetch" href="https://www.xxx.com/">

假设页面中的图片都是在www.xxx.com域名下，那么通过DNS预解析可以加快速度

vue相关组件库

饿了么出品：mint-ui
vux
weui

使用mint-ui

mint-ui文档

npm i mint-ui -S
如果要按需引入，还需要安装npm i babel-plugin-component -D
根据文档配置.babelrc
然后引入要使用的组件

qs处理查询参数

用于处理网址路径问号后面的内容(?a=1&b=2),不包括问号

npm i qs安装

//?name=stage&age=24
import qs from 'qs';
let obj = qs.parse(location.search.substring(1));//查询参数包含问号，因此用substring将问号截掉
obj//经过qs处理，查询参数变成对象{name:stage,age:24}
如果要获取name,利用对象的解构赋值
let {name} = qs.parse(location.search.substring(1));

velocity

中文教程
 回到顶部
 transform:matrix在线矩阵
 将transform转换成matrix
matrix的6个参数详解

【点击查看在线例子】

vue-touch

github:vue-touch

安装

1 2	# vue2.0以上要用next分支 npm i vue-touch@next

使用

1 2	import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'})

<!-- 默认渲染成div -->
<v-touch v-on:swipeleft="onSwipeLeft">Swipe me!</v-touch>
<!-- 通过tag可以渲染成其他的标签 -->
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>

移动端事件

移动端的click有300ms延迟的问题，因为在移动端，连续两次点击是缩放操作，所以在用户点击屏幕后，浏览器会检查在300ms内是否有另一次点击，如果没有则触发click事件，否则缩放。

touch事件

touchstart
touchmove
touchend
ev.changedTouches[0].clientX

Get Start

初始化项目

前提：电脑已经全局安装过webpack和vue-cli

vue init webpack project-name //初始化项目
cd project-name //进入项目
npm run dev //启动项目
npm run build //打包

Unexpected end of JSON input while parsing near错误解决办法

npm cache clean --force
# 上面方法不行的话，将镜像切换回官方镜像
npm set registry https://registry.npmjs.org/
# 再不行的话，将npm降级到4
npm i npm@4 -g

打包时不要map文件：

1 2	去src/config/index.js中改一个参数： productionSourceMap:false

调整为多页面应用

基于vue-cli搭建一个多页面应用

加入静态页面资源

静态页面资源下载链接: https://pan.baidu.com/s/1skF4Kpv 密码: 29qn
将index.html和index.css放入index文件夹下，公共css和公共js放入modules文件夹下
src/pages/下的各个文件夹里的js文件是入口文件，通过import引入css和js
npm i axios
通过axios获取数据，通过vue渲染到页面

单文件组件

将html剪切到<template>

git branch lesson1：创建分支
git checkout lesson1：进入分支