stylus语法
项目代码结构：
README.md：项目说明文件...第三方模块依赖。
package-lock，json：是package的一个锁文件，帮我们确定安装的第三方包具体的版本，保持团队编程的统一。
LICENSE：是一个开源协议的说明
package：里面有很多依赖包，主要是开发项目时候有第三方模块依赖，都放在这里。
index：项目默认的一个首页模板文件。
.postcssrc：是对postcss的一个配置项。
.gitignore：当我们使用git时，希望把代码传到线上去，但是有一些特殊的代码并不希望传到线上去，当往线上git仓库提交时，它将不会被提交到git代码仓库。
.eslintrc：代码规范，可以按照规范检测代码。
.eslintignore：提示以上格式代码不会被检测/build/，/config/，/dist/，/*.js
.editorconfig：帮助我们配置了编辑器里面的语法，也可以自己加一些配置，来统一编辑器自动化代码的格式化。
.babelrc：语法解析器，对语法转换后最终转换成浏览器能够编译执行的代码。
static：放置的静态资源，如静态图片，json数据等。
src：放置的整个项目的源代码。（main.js：整个项目的入口文件。App.vue：项目的最原始根组件。router：index.js项目的路由。components：项目里用的小组件。assets：项目里用的图片类资源）
node_modules：放置的项目依赖的第三方包。
config：放置的项目配置文件（index.js：放置基础信息。dev.env：放置开发环境配置信息。prod.env：放置线上环境配置信息。）
build：放置的项目打包的内容webpack配置。
文件名以‘.vue’结尾的时候，这种文件被叫做单文件组件，它里面放的是一个vue的组件。
组件的模板放在最上面的template标签里，组件的逻辑放在script标签里，组件的样式放在style标签里。
main.js里显示组件。
路由就是根据网址的不同，返回不同的内容给用户。
router文件夹里的index.js文件就是路由的配置文件，index.js文件里的routes数组就是对路由的具体配置，数组的每一项就是一个配置项，每一项的component属性值就是导入的相应的组件名。
使用fastclick库解决移动端的300ms点击延迟问题（有小bug）
npm install fastclick --save【一定要在当前项目的目录下执行】
解决300ms延迟另一种方法：给html设置一个样式 ==》 html { touch-action: manipulation }
引入css文件解决一像素边框问题
在styles文件夹里创建varibles.styl文件，把常用的样式保存起来，styl后缀表示是stylus文件。
在style标签里引入文件要使用‘@import’而不能用‘import’。
引入文件时，‘@’符号表示src文件夹。在css里要引入其他的css，想用‘@’符号的话，前面必须加一个‘~’=>‘~@’【使用其他别名的话一样要加‘~’】。【main.js中引入css文件，一样直接写别名就行，不需要加‘~’】
引入css样式变量文件后，直接在要使用的属性值里写那个属性名即可。
在build文件夹的webpack.base.conf.js文件里，找到resolve->alias，在里面就可以给一些路径设置别名了【当我们修改了配置项的时候，一定要重启服务器】
例如：alias: {
'@': resolve('src'),
'styles': resolve('src/assets/styles'),
}
轮播图组件vue-awesome-swiper
通过swiper-pagination-bullet-active类设置轮播图的轮播点样式。
因为style标签里的样式设置了scoped，是只在当前组件里生效，而swiper-pagination-bullet-active这个类是在swiper组件里的，所以把它的样式直接写在.wrapper下面不会生效。
可以使用三个‘>’【.wrapper >>> .swiper-pagination-bullet-active】的方式，把这个选择器写在最上面，样式进行穿透，让.wrapper下面出现的所有.swiper-pagination-bullet-active背景色都发生相应改变，这样就不会受scoped的限制了。
ajax请求数据
在每个组件里都发送ajax请求去请求数据太不合理，我们可以在Home.vue里去发送ajax，请求到数据以后把数据传给子组件就行了。
先写import axios from 'axios'引入axios，然后在mounted函数里执行发送ajax请求的函数。
axios.get()返回结果是一个promise对象，所以可以直接再加then()。
【methods:{
getHomeInfo(){
axios.get('/api/index.json')
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc(res){
console.log(res)
}
},
mounted(){
this.getHomeInfo()
}】
把本地模拟的数据放在static文件夹中，在static文件夹中新建mock文件夹，再新建index.json文件，放入数据。因为整个项目里只有static文件夹的内容可以被外部访问到。
不希望把这些本地模拟的数据提交到线上，找到.gitignore文件，在‘yarn-error.log*’的后面加上static/mock，这样存放本地模拟数据的文件夹就不会被提交到线上的Git仓库里。
在axios.get()方法中，本地测试写的是本地的路径，上线的时候修改为api路径有风险。
解决办法：找到config文件夹的index.js文件，找到dev里的proxyTable配置项，将其内容改为
proxyTable: {
'/api': {//当请求/api目录的时候
target: 'http://localhost:8080',//把请求转发到当前服务器的8080这个端口上
pathRewrite: {
'^/api': '/static/mock'//当请求的地址是以‘/api’开头的，那么就把请求地址替换为本地的static文件夹下的mock文件夹下
}
}
},
改完配置项文件以后，需要重启一下服务器。
index.json文件里：
"ret": true代表服务器正确响应了请求，
data里存放的是返回的所有的数据。
【json里，最后一个数据（数组的最后一项）的后面如果多了一个逗号就可能报错】
安装axios：cnpm install axios --save
1、执行get数据请求
axios.get('url',{
params:{
id:'接口配置参数（相当于url?id=xxxx）'， },}).then(function(res){
console.log(res);//处理成功的函数 相当于success}).catch(function(error){
console.log(error)//错误处理 相当于error})
2、执行post数据发送
axios.post('url',{data:xxx},{
headers:xxxx,}).then(function(res){
console.log(res);//处理成功的函数 相当于success}).catch(function(error){
console.log(error)//错误处理 相当于error})
页面滚动插件
安装Bscroll插件：cnpm install better-scroll --save
使用插件的代码部分需要符合结构：外层一个包裹，往里一层还是一个包裹，再往里才是一项一项的内容【类似图中选中部分】
使用时先在要使用插件的标签内设置ref属性（如ref="wrapper"），这里是给list部分设置所以加在.list标签上，
然后在script里引入插件：import Bscroll from 'better-scroll'
再在mounted里调用：mounted(){
this.scroll=new Bscroll(this.$refs.wrapper)
}
Vuex状态管理模式
作用：实现组件间的数据共享，状态管理模式，集中管理所有组件（哪怕是兄弟组件，没有公共父组件的组件等）
也可以直接从state直接向Mutations传递数据（commit）略过中间的Actions，数据少的情况下
state ==》 存放公用数据 通过this.$store.XX可以拿到公用数据，然后通过vuex的dispatch方法，向actions触发事件和传递数据： this.$store.dispatch('changeCity', city)
actions ==》通过vuex的dispatch方法 把异步或者批量同步操作放在Actions里，把异步操作或者批量的同步操作 放在actions里
mutations ==》actions通过commit方法 调用mutations，mutations里面放的是一个个对State的同步修改
vue-router编程式导航跳转
每一个组件都有router实例属性，this.$router.push(路由)就能跳转页面
keep-alive
是vue自带的属性，路由加载一次后 把路由的内容放到内存中 下一次再进这个路由的时候 不需要重新加载 把之前的拿出来显示就可以了
最后一步 点击不同城市 首页显示对应内容实现方法：显示对应首页