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

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

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

欢迎骚扰！