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，具体使用： 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-scroll' 在组件的需要滚动的外层div元素上ref = 'wrapper'然后在组件的mounted()钩子中this.scroll = new BScroll(this.$refs.wrapper),但是这一步之前需要对整个需要滚动的区域 最外层元素写如下样式：overflow：hidden；position：absolute;top: 1.58rem; left :0 right:0 bottom:0这样才不会让多余的内容把屏幕撑大；
17. 对于手机电话联系人 有拼音搜索那竖条 样式应该是 首先需要定位， 垂直居中显示的 用flex布局：

position:absolute
top: 1.58rem
right:0
bottom:0
display:flex
flex-direction:column
justify-content:center

18. 实现联系人右侧字母点击 左侧联系人列表跳转到对应区域：首先需要在右侧字母列表组件Alphabet.vue中 每一个字母元素 添加click事件，当该事件触发时，往父组件City.vue中抛事件，传递当前点击的是哪个字母alphabet； 在父组件City.vue中将alphabet再向下传递给List.vue(Alphabet.vue的兄弟组件）在联系人列表List.vue组件中需要使用watch监听父组件City.vue传递过来的alphabet值的变化，执行var element = this.$refs[this.alphabet][0]; this.scroll.scrollToElement(element) 就会实现右侧竖条点击某个字母，左侧联系人列表会自动定位到相应区域；
19. 实现右侧字母条滑动，左侧联系人列表也跟着对应滑动；首先需要在Alphabet.vue组件中每个字母元素添加属性:ref =“alphabet” 添加事件@touchstart=“handleTouchStart” @touchmove=“handleTouchMove” @touchend=“handleTouchEnd” 定义一个变脸isTouched 默认=false 在handleTouchStart函数中this.isTouched = true; 在handleTouchEnd函数中this.isTouched = false; 另外在handleTouchMove(e)中 判断当isTouched=true时 去计算几个值：startY= this. $ refs["A"].offsetTop; touchY = e.touches[0].clientY-73 然后计算当前滑动的是第几个字母：var index = Math.floor((touchY-startY)/20) ; this.$emit("changeAlphabet",this.alphabetsList[index])
20. 对于router vuex这种第三方的插件 在vue中使用都大同小异。首先需要在终端中cd到项目文件夹 npm进行安装。然后需要在src下面新建文件夹store(router) -->新建index.js文件：引入vue import Vue from 'vue; import Vuex from 'vuex' ;Vue.use(Vuex); export default new Vuex.store({state:{city:cityName},actions:{changeCity(ctx,newName){ctx.commit('mutateCity',cityName)}},mutations:{mutateCity(state,newName){state.city = newName}}})' 对于router–>index.js:import Vue from 'vue';import Router from 'router'; Vue.use(Router);export default new Router({routes:[{path:'',name:,component:}]}) 最后需要在项目入口main.js中引入：import router from './router/index.js'; import store from './store/index.js' 然后在根组件中 new Vue({el:’#app’,router, store, template:’’,component:‘App’})
21. 对于Vuex的使用：可以参照官网那张图 组件中想使用store中的数据 直接this.$store.state.city即可；如果组件想改变store中的数据 需要经历 this.$store.dispath{(}^{\prime }changeCit{y}^{\prime },cityName)派发一个action-->在/stroe/index.js中的actions中触发changeCity中执行commit方法去对应执行mutations中的方法即改变state中的数据；或者在组件中直接跳过dispatch一个action而是直接‘this.$store.commit(‘mutateCity’,cityName)` 只需要在store中的mutations中写好mutateCity方法 去改变state中相应变量即可。
22. mapState的使用： 在组件中想使用store中的数据得写this.$store.state.city太长很麻烦，所以可以直接在组件中引入:import {mapState} from 'vuex' 然后在computed:{}计算属性中:...mapState({currentCity:"city"})就可以直接在组件中使用this.currentCity来使用state中city数据 代替之前的写法
23. mapMutations的用法。在组件中想要改变store中的数据 需要this.$store.commit('mutateCity',cityName)（或者this.$store.dispatch('changeCity',cityName) 在actions中对应的changeCity(cox,cityName)方法中再去触发ctx.commit(‘mutateCity’,cityName)）也是可以的，但是有点冗余，所以一般都直接在组件中直接commit触发mutations中方法：this.$store.commit('mutateCity',cityName)
    但是也是有点长，所以可以引入import {mapMutations} from 'vuex' 然后在methods方法中：...mapMutations({mutateCity:"mutateCity"})然后直接在组件中调用this.mutateCity(cityName)即可
24. mapGetters的使用 ，类似于组件中的computed计算属性，使用场景就是需要对store中state中的数据做进一步处理时，会用到：在store/index.js中；export default new Vuex.Store({state, actions,mutations,getters:{doubleCity(state){return state.city+' '+state.city}}})即可。 在组件中直接引入import {mapGetters} from 'vuex'在computed计算属性中：...mapGetters({doubleCity:"doubleCity"})之后在该组件中可以直接使用this.doubleCity 其实类似于mapState
25. keep-alive的使用。页面直接来回切换，如果内容不变需要对组件内容进行缓存，就可以在App.vue组件中在router-view组件外层包上< keep-alive >< /keep-alive> 进行组件缓存，但是具体需要结合activated()钩子函数进行使用，可以防止需要请求资源的地方也错误使用缓存的问题
26. localStorage的使用。对某些需要缓存在本地的变量，可以存储在localStorage中：localStorage.city = ...一般配合vuex使用在state.js中使用。流程：在mutations.js中在需要改变state.city = cityName 同时更新localStorage.city = cityName ；在state.js中 city的值可以使用localStorage.city