vue项目(project-travel)知识点总结

1. 单页面应用 VS 多页面应用：
   前者在页面之间切换时并不会重新进行服务端资源请求，页面之间切换快，但是首屏渲染时间长，不利于SEO（因为单页面应用第一次请求返回的除了html外还有一个js文件 而SEO只识别html内容）
   后者每次切换页面都会重新进行一次页面请求，页面切换时间长，但是首屏渲染较快 利于SEO；
2. 移动端项目 需要在meta标签中配置：width=device-width，initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no
3. 引入reset.css. 因为在不同设备上手机尺寸 或者浏览器不同导致页面渲染效果有差别；在项目文件夹assets下面创建styles文件夹，把reset.css放在该目录下。在项目的入口文件main.js中 import './assets/styles/reset.css'
4. 引入border.css . 解决1px边框的问题：有的手机屏较大 2倍屏 3倍屏 ，如果在页面上写border-bottom：1px solid实际上在上述设配上对应的是2个物理像素的高度，为了解决多倍屏上1px边框显示多倍的问题。把该border.css放在assets/styles下面，同样在main.js中引入：import './assets/styles/border.css'。在想使用该类的地方 加上类border-bottom
5. 解决300ms延迟问题：click事件点击会延迟300ms，然后再执行，体验不好，需要引入fastclick库（如果服务启着 需要先把服务停了，再进行fastclick安装. 在终端首先【cd到项目文件夹下】 然后 npm install fastclick --save 把fastclick这个第三方的包安装到项目的依赖中 --save是无论dev prod 都需要使用fastclick，重启服务后，在main.js中引入import fastClick from 'fastclick' 使用：fastClick.attach(document.body)）
6. iconfont使用 图标管理-我的项目–+
7. 项目中css部分使用stylus，需要在终端 cd 到项目文件夹下：npm install stylus --save 安装到项目的dependiences
8. 安装stylus-loader. cd到项目文件夹下： npm install stylus-loader --save
9. 如果设计师给的是2倍图 工具量的尺寸是86px 在写css样式时 应该是写43px; 但是移动端最好使用rem为单位 也就是按照assets/styles/reset.css中 html的font_size的多少倍 比如 reset.css中 html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;} 这时 1rem =html fontsize 50px. 所以上述某dom元素的尺寸原本是43px 此处按照rem单位应该是 .86rem =（43px/50px）
10. iconfont图标使用：把需要使用的图标首先🛒添加到自己在confront添加的项目中，然后下载到本地，其中confront.cs放在src/assets/styles中，然后在styles目录下面新建iconfont文件夹把 iconfont.svg, iconfont.tff, iconfont.woff, iconfont.eot放在该文件夹下。在main.js中引入iconfront.css：import '@/assets/styles/iconfont.css' 然后打开该css文件需要把路径修改一下：原有路径前面添加：./iconfont，具体使用：<span class="iconfont">&#xe624;</span> class指明iconfront 标签内容即图标的16进制编码
11. 把公用的样式抽离出来放在 styles/variables.styl文件下，全局都会使用的css样式 可以放在变量中存储：在src/assets/style下面新建variables.styl。该文件下定义变量 $bgColor = red 在需要使用该变量的组件中style部分：@import '～@/assets/styles/variables.styl' ------>.header background: $bgColor （此处需注意 1. 在css中引入另一处的css样式 需要@import ‘另一个css文件位置’ 2.css处路径中如果使用别名 则别名前需要加一个～ 但是其他的js引入的时候可以直接写别名 不需要加～）
12. 给经常使用的路径对应的文件夹名起别名： 需要在build目录下的webpack.base.config.js中的resolve allies中 ‘别名名字’：resolve(别名对应的真实路径 如：‘styles’:resolve(‘src/assets/styles’)) 接下来就可以在vu e文件中需要引用该路径的地方 直接使用别名，或者在css引用的地方 也使用别名的话 别名前面需要加上～即可 注：改变webpack配置文件的东西 都需要重启服务才可以生效
13. 对于单行文字显示省略号的样式想抽离出来可以在assets/styles下面建一个文件 ‘mixins.styl’ ：ellipsis() overflow:hidden;text-overflow:ellipsis;white-space:nowrap 接下来就可以在想使用该样式的地方首先要引入：@import ‘～styles/mixins.styl’ 然后直接在相应类处写ellipsis()即可。
14. axios可以跨平台，在浏览器可以发送xhr请求，在node服务器可以发送http请求，首先需要下载：在终端cd到项目文件夹：npm instll axios --save 然后在需要使用的地方引入import axios from 'axios' 然后在相应页面对应的组件处axios.get('/api/index.json').then((res)=>console.log(res)))即可，一般比如当用户访问/首页时 App.vue根组件中的< router-view >会显示 router中该路径对应的组件，比如Home.vue 而该组件又会包含该首页很多小组件，所以首页所有的数据应该在Home.vue中的mounted()钩子中使用axios进行获取，然后吧获取到的数据使用props传给下面的子组件，这样夹在加载首页时，只会进行一次资源请求。
15. 使用mock数据。1. 首先在static文件夹下新建mock文件夹 下新建index.json 用来放页面中需要显示的数据。 2. 在需要进行axios请求的组件Home.vue中引入axios:import axios from 'axios'3. 在mounted()钩子中 进行请求数据axios.get(’/api/index.json’,(res)=>对返回来的数据进行相应操作)4. 3中的路径如果这样写，一定要在config文件夹下进行相应的配置（有点类似于地址转换）/config/index.js中的ProxyTable:'/api':{target:"http://localhost:8080",pathRewrite:{'^/api',"/static/mock"}}
16. 页面拖拽滚动效果–>better-scroll插件：cd 到项目文件夹下进行插件安装：npm install better-scroll --save 然后在需要使用该插件的地方import BScroll from 'better-scr