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！这就是我在项目中遇到的一些需要注意事项

最后：大家可以看一下我的成品。

易简图  ——一个专注于图片浏览资源器

欢迎骚扰！