vue2.x的使用（查漏补缺，不定期更新）

编写规范

根目录新建.editorconfig文件

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

router的使用

多次点击路由报错

router文件夹下的index.js文件编辑

const originalPush = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(location) {
  return originalPush.call(this, location).catch(err => err)
}

路由加标题

router文件夹下的index.js文件编辑

const routes = [
	{
		path: '/',
		redirect: '/home' // 重定向
	},
	{
		path: '/home',
		name: 'Home',
		component: () => import('../views/Home/Home.vue'),
		meta: {
			title: '首页' // 标题
	    }
	},
	{
	    path: '*',
	    component: () => import('../views/NotFound'),
	    meta: {
	      title: '404' // 页面404
	    }
  }
]

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

router传递参数

• params类型

 - 配置路由格式：/router/:id
 - 传递的方式：在path后面跟上对应的值
 - 传递后形成的路径：/router/123，/router/abc

• query类型

 - 配置路由格式：/router，也就是普通配置
 - 传递的方式：对象中使用query的key作为传递方式
 - 传递后形成的路径：/router?id=123，/router?id=abc

# Data.vue
methods: {
	GetId(){
		this.$route.query.id
	}

图片懒加载使用

使用vue-lazyload

安装

npm install vue-lazyload --save

导入

# main.js
import VueLazyLoad from 'vue-lazyload'

使用

# main.js
Vue.use(VueLazyLoad)

# 修改img
:src -> v-lazy

屏幕自适应

下载

npm install postcss-px-to-viewport --save-dev

在项目根目录下新建postcss.config.js

module.exports = {
    plugins: {
        "postcss-px-to-viewport": {
            "viewportWidth": 375, // 视窗的宽度，对应的是我们设计稿的宽度(移动端iPhone6的宽度/2)
            "viewportHeight": 776, // 视窗的高度(移动端iPhone6的高度/2)
            "unitPrecision": 5, // 指定'px'转换为视窗单位值的小数位数(很多时候无法整除)
            "viewportUnit": "vw", // 指定需要转换成的视窗单位，建议使用vw
            "selectorBlackList": ['#nprogress'], // 指定不转换为视窗单位的类
            "minPixelValue": 1, // 小于或等于'1px'不转换为视窗单位
            "mediaQuery": false, // 允许在媒体查询中转换`px`
            // "exclude": /(\/|\\)(node_modules)(\/|\\)/
        },
    }
};

axios使用

• request.js

import axios from 'axios'

export function request(config) {
  const instance1 = axios.create({
    baseURL: 'http://127.0.0.1:8000/', // 你请求的主网址
    timeout: 5000,
  })

  instance1.interceptors.request.use(config => {
    return config
  }, error => {
  })

  instance1.interceptors.response.use(res => {
    return res.data
  }, error => {
  })

  return instance1(config)
}

• get模式

import {request} from "./request"
export function getData() {
  return request({
    url: '/data/get/',
  })
}

• post模式

import {request} from "./request"

export function getData(data) {
  let param = new URLSearchParams()
  param.append('param', data)
  return request({
    url: '/data/post/',
    method: 'post',
    data: param,
  })
}

vuex

vuex存储在本地（插件）

• 下载

npm install vuex-persistedstate  --save

• 使用
  index.js下编辑

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from "./actions"
import getters from "./getters"
import modulesA from "./modules/modulesA";
import createPersistedState from "vuex-persistedstate" // 添加这行

Vue.use(Vuex)

const state = {
  home_top_image: []
}

export default new Vuex.Store({
  plugins: [createPersistedState()], // 添加这行
  state,
  mutations,
  actions,
  modules: {
    a: modulesA
  },
  getters,

})

vuex保存本地使用

created() {
    this.getData()
},
methods: {
    getData() {
        if(this.$store.state.home_top_image.length === 0){
            getData().then(res => {
                if(res.code === 200){
                    // this.$store.commit('home_top_image', {data: res.data.top_images}) // 这是vuex的mutations提交方法
                    this.$store.dispatch('get_top_image', {data: res.data.top_images})
                    this.top_images = this.$store.state.top_image
                }
            })
        }
        else {
          this.top_images = this.$store.state.top_image
        }
    }
}

vuex的使用

• mutations提交方法(同步操作)

this.$store.commit('top_image', {data: res.data.top_images}) // home.vue

// mutations.js
export default {
    top_image(state, data){
        state.top_image = data
    }
}

• actions提交方法(异步操作)

this.$store.dispatch('get_top_image', {data: res.data.top_images}) // home.vue

// actions.js
export default {
    get_top_image(context, data){
        context.commit('top_image', data)
    }
}