vue项目常见需求（项目实战笔记）
一、起步
1.引入reset.css解决手机之间不同分辨率的问题（reset.css为别人封装的css文件）
import './assets/styles/reset.css'
使用方式 1rem=50px
我们使用rem代替px
2.引入border.css解决手机边框1px的问题
import 'styles/border.css'
使用方式 class="top" //在添加上边框，同理 left、right、bottom
3.解决移动端点击事件存在300毫秒延迟问题
在项目目录运行cmd输入
npm install fastclick --save
在main.js中引入文件
import fastClick from 'fastclick'
实例化：fastClick.attach(document.body)
二、常用插件
1.stylus 简化css编写方式
安装：npm install stylus --save
再安装：npm install stylus-loader --save
使用方式：<style lang="stylus"></style>
2.axios Ajax工具
安装： npm install axios --save
使用，法1：在需要使用的组件中<script>标签里引入
import axios from 'axios'
this.$axios()
使用，法2：
在main.js中引入
import axios from 'axios'
改为Vue的原型属性
Vue.prototype.$ajax=axios
直接调用this.$ajax()
例子：
this.$ajax.get('/api/index.json')
.then(function(res){
console.log(res)
})
3.vue-awesome-swiper 安装轮播插件（这里推荐使用2.6.7版）
安装：npm install vue-awesome-swiper@2.6.7 --save
使用方式：官方文档
4.better-scroll 滚动窗口插件
安装：npm install better-scroll --save
使用方式：
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM，但不会影响滚动 --> </div>
script中
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')//找到对应的标签
let scroll = new BScroll(wrapper)//实例化的第一个参数是一个原生的 DOM 对象
详情：官方文档
三、数据管理
Vuex 数据框架（进行数据传输）
/* 引入数据管理框架 */
import store from './store'
数据管理框架基础：
内容state（存公共数据）、actions、mutations（用于改变公用数据中的值）
如：
state: { city: '成都' }, actions: { changeCity (ctx, city) { // 调用mutations里对应的方法，city为所传值 ctx.commit('changeCity', city) } }, mutations: { changeCity (state, city) { state.city = city }
注意：
1.采用dispatch调用index.js中actions对应的方法，city为所传的值
this.$store.dispatch('changeCity', city)
2.调用mutations里对应的方法，city为所传值
ctx.commit('changeCity', city)
改变值只能通过mutation方法区完成
3.调用公用数据方法
直接调用：this.$store.state.city
映射调用：
添加import { mapState } from 'vuex'
添加计算属性，将vuex里的city映射到计算属性的city中可直接调用this.city
computed: {
...mapState(['city'])
}
四、优化
keep-alive标签
功能 标签内的内容会被放入内存中，只需渲染一次，不用每次访问都进行渲染
<keep-alive>
<router-view/>
</keep-alive>
路由内的东西只需渲染一次，下次会直接从内存中调用数据
如果有每次进入都需要更新的数据可以使用生命钩子函数activated(){}
activated 在组件加载时调用
对应的 deactivated 在组件关闭时调用
前提需要使用 keep-alive
也可以这样写：
<keep-alive exclude="排除的组件名（不放入内存中，每次进入都会更新）">
内容。。。
</keep-alive>
五、开发环境的转发
编辑config里的index.js
找到proxyTable:{}
改写：
proxyTable: {
'/api':{
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/hithock'
}
}
}
//在开发环境访问时，将需要访问的api目录下的index.json改写为本地目录下static/hithock目录里
//前提需要用webpack
六、联机测试
1.要想服务可以通过ip地址访问需要改工程文件目录下的package.json中的 dev
添加 --host 0.0.0.0
变为："dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js"
七、项目打包
npm run build
打包出一个dist文件夹
将文件夹里的内容放到后端服务器上即可
当然，如果想改变文件的路径需要修改 config/index.js里面的打包内容如下：
assetsPublicPath: '/Travel', // 后端运行的目录
这里我们改为Travel目录
八、疑难问题
1.解决手机兼容性问题
npm install babel-polyfill --save //判断有无cs6新特性
2.使用better-scroll后click事件失效，解决方法
mounted(){
this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
}
//better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true
OK！这就是我在项目中遇到的一些需要注意事项
最后：大家可以看一下我的成品。
易简图 ——一个专注于图片浏览资源器
欢迎骚扰！
