vue中引入百度地图

在indexhtml文件中引入百度地图

但是并没有用且报错

此处报错非常诡异，因为我采用动态引用的方式时并没有报该错

新创建一个文件utils/baiduMapjs

在百度地图组件baidumapvue中引用

1VUE-X辅助函数用法：

Appvue内容：

<template>

  <div id="app">

    <h1>{{num}}</h1>

    <button @click="addNumber">增加</button> |

    <button @click="delNumber">减少</button> |

    <button @click="ajaxfn">异步加</button> |

  </div>

</template>

<script>

/ 导出vuex中的 mapState 方法/

import { mapState,mapGetters, mapMutations,mapActions} from 'vuex'

export default {

  name:"App",

  computed:{

    /  /

    mapState(['num']),

    mapGetters(['getDaZhuan','getBenKe'])

  },

  methods: {

    / 利用mapMutations方法使用拓展运算符把Mutations的方法解构在methods中 /

    / 在this中也可以找到对应解构出来的方法 /

    / mapMutations(['ADDNUM','DELNUM']), /

    / 如果Mutations中的方法和methods中同名了,可以采用对象形式修改 /

    mapMutations({

      addfn:'ADDNUM',

      delfn:'DELNUM'

    }),

    / 类似于下面 /

    / ADDNUM:function(){}

    DELNUM:function(){} /

    addNumber(){

      / this$storecommit('ADDNUM',2) /

      / thisADDNUM(2) /

      thisaddfn(2)

    },

    delNumber(){

      / this$storecommit('DELNUM',2) /

      / thisDELNUM(2) /

      thisdelfn(2)

    },

    ADDNUM(){

      consolelog(2);

    },

    / 利用mapActions方法使用拓展运算符把Actions的方法解构在methods中 /

    / 在this中也可以找到对应解构出来的方法 /

    / mapActions(['addajax']), /

    / 如果Actions中的方法和methods中同名了,可以采用对象形式修改 /

    mapActions({

    addajax2:'addajax'

    }),

    ajaxfn(){

     thisaddajax(5)

    },

    addajax(){

     thisaddajax2(5)

    }

  },

}

</script>

<style>

</style>

store下indexjs内容：

/ import { set } from 'core-js/core/dict'; /

import Vue from 'vue'

import Vuex from 'vuex'

Vueuse(Vuex)

/ Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化。 /

/ 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,

   Vuex将会成为自然而然的选择 /

/ 导出一个Vuex实例化对象 /

export default new VuexStore({

  / state是用来存储组件中的数据的 /

  state: {

    msg: '我是组件共享的数据',

    num: 0,

    list: [{

        "title": "某xxxx去了学校1",

        "dec": "xxxxxxx学习了vue学习了java",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校2",

        "dec": "xxxxxxx学习了vue学习了javaScript",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校3",

        "dec": "xxxxxxx学习了vue学习了云计算",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校4",

        "dec": "xxxxxxx学习了vue学习了前端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了学校5",

        "dec": "xxxxxxx学习了vue学习了后端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了学校6",

        "dec": "xxxxxxx学习了vue学习了大数据",

        "xueli": "本科"

      }

    ]

  },

  / getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

  / 类似于计算属性 /

  getters: {

    / 计算大专学历的数据 /

    getDaZhuan: function (state) {

      return statelistfilter(r => rxueli == '大专')

    },

    / 计算本科学历的数据 /

    getBenKe: function (state) {

      return statelistfilter(r => rxueli == '本科')

    },

    / 说明也具有缓存功能 如果state中的数据得到了改变

        那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters

        中的属性的值就不会发生改变/

    getRandom:function(state){

       return statenum +'--'+ Mathrandom()

    }

  },

  / 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

  mutations: {

    / 在mutations里面写异步就会造成数据混乱的问题 /

    / mutations 的方法最好大写,为了和actions方法做区分 /

    / mutations 通过payload来获取 /

    ADDNUM: function (state, payload) {

      consolelog('ADDNUM', state);

      / 模拟后台获取数组的异步场景 /

      / setTimeout(()=>{

        statenum+=payload

      },500) /

      / statenum++ /

      statenum += payload

    },

    DELNUM: function (state, payload) {

      consolelog('DELDNUM', state);

      / statenum-- /

      statenum -= payload

    },

  },

  / actions是用来调后台接口的并commit提交一个mutations /

  actions: {

    / actions里面的方法小写为了区分mutations里面的方法 /

    / 异步请求要放 actions 里面去写 不要放组件写/

    addajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        / 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 /

        commit('ADDNUM', data)

      }, 500)

    },

    delajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        / 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 /

        commit('DELNUM', data)

      }, 500)

    },

  },

  / 可以使用modules把vuex分模块 /

  modules: {}

})

2分模块使用vuex：

appvue内容：

<template>

  <div id="app">

    <h1>{{$storestatemodAmodaStr}}</h1>

    <h1>{{$storestatemodBmodbStr}}</h1>

    <h1>{{$storegetters['modA/strGetter']}}</h1>

    <button @click="changeStr">修改modaStr的值</button>

    <button @click="waitchange">异步修改modaStr的值</button>

  </div>

</template>

<script>

export default {

  name:"App",

  created(){

    consolelog(this);

  },

  methods:{

    changeStr(){

      this$storecommit('modA/CHANGESTR','坚持学VUE啊')

    },

    waitchange(){

      this$storedispatch('modA/waitfnStr','坚持学前端啊')

    }

  }

  }

</script>

<style>

</style>

store新建modules文件创建ModAjs文件：

/ 模块的局部状态 /

/ 箭头函数如果想返回对象需要使用()包一下不能直接返回{} /

const state = ()=>({

    modaStr:'我是模块A的数据'

  })

  / getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

  / 类似于计算属性 /

  const getters= {

    strGetter:function(state){

        consolelog(state);

      return statemodaStr + 'getter'

    }

  }

  / 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

  const mutations= {

   CHANGESTR(state,payload){

    statemodaStr = payload

   }

  }

  / actions是用来调后台接口的并commit提交一个mutations /

  const  actions= {

    waitfnStr({commit},data){

        setTimeout(()=>{

            commit('CHANGESTR',data)

        },1000)

    }

  }

  / 可以使用modules把vuex分模块 /

  const modules={

  }

  export default {

      / 保证模块之间的数据独立运行,不互相影响 /

      namespaced:true,

      state,

      getters,

      mutations,

      actions,

      modules

  }

store新建modules文件创建ModBjs文件：

const state = ()=>({

    modbStr:'我是模块B的数据'

  })

/ getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

/ 类似于计算属性 /

const getters= {

}

/ 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

const mutations= {

}

/ actions是用来调后台接口的并commit提交一个mutations /

const  actions= {

}

/ 可以使用modules把vuex分模块 /

const modules={

}

export default {

    / 保证模块之间的数据独立运行,不互相影响 /

    namespaced:true,

    state,

    getters,

    mutations,

    actions,

    modules

}

store下indexjs文件：

/ import { set } from 'core-js/core/dict'; /

import Vue from 'vue'

import Vuex from 'vuex'

/ 先把各个模块导入进来 /

import modA from '@/store/modules/ModAjs'

import modB from '@/store/modules/ModBjs'

Vueuse(Vuex)

/ Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化。 /

/ 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,

   Vuex将会成为自然而然的选择 /

/ 导出一个Vuex实例化对象 /

export default new VuexStore({

  / state是用来存储组件中的数据的 /

  state: {

  },

  / getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /

  / 类似于计算属性 /

  getters: {

  },

  / 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /

  mutations: {

  },

  / actions是用来调后台接口的并commit提交一个mutations /

  actions: {

  },

  / 可以使用modules把vuex分模块 /

  / 分模块实现数据集中管理 /

  / 在 modules 中把模块名注释一下/

  modules: {

   modA:modA,

   modB:modB

  }

})

使用框架时必须熟知框架指令特性！很重要；

Bootstrap+jQuery是很好的选择！

库：          1i18n(双语言切换)；

                  2vue-router(路由）；

                  3vuex(状态管理，需要进行双语言切换监听变化)；

                  4ElementUI(饿了么以电脑端为主得UI框架)；

                  5sass(css预处理)；

                  6echarts(需要K线图，个人推荐不要用echarts,太大)；

                  7axios(相对于fetch兼容性好，请求数据)

IE的坑：1走马灯之前用的是swiper的，结果兼容性不好，40+兼容不好，30主要以移动端为主，

                之后换成了ElementUI的走马灯又引导出无法覆盖ElementUI的样式，因为VUE是默认全局覆盖局部，再加一个style，不要加scoped,ElementUI是全局引入！  解决问题。

                2经验不足，IE9不支持flex,坑、坑、坑移动端写习惯了！

                3多行文本省略只支持webkit内核浏览器，又是坑，用js控制长度搞定！

                4低版本兼容引入babel-polyfill，将build webpackbaseconfjs里entry修改为entry: {'babel-polyfill': 'babel-polyfill',app: '/src/mainjs'},

            5使用axios低版本兼容 es6-promise包，在mainjs里引用

                import promise from 'es6-promise'

                promisepolyfill()

打包：1history模式：需要服务器端配置请看官网>

用vue router如何获得当前页面的路由的方法如下：

路由器将自渲染对应的组件以及更新路由信息：

其中<router-view>可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this$对象上。

路由对象和路由匹配：

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。

如属性 说明：

$routepath 当前路由对象的路径，如'/vi

$routequery 请求参数，如/foouser=1获取到queryuser = 1

$routerouter 所属路由器以及所属组件信息

$routematched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$routename 当前路径名字

当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。

这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。

在我们使用vue-cli创建生产的项目build后，默认会生成大量的map文件，如下图：

这些map非常大，所以最好在build是不要将其生产出来。

修改配置，使其build时不生成map文件：

在config文件夹下找到indexjs文件，打开然后找到productionSourceMap，将其设置为false即可。

以上就是关于vue中引入百度地图全部的内容，包括:vue中引入百度地图、VUE-X 辅助函数用法及分模块使用vuex、Primary:Vue{三、一个基于Vue的门户网站(经验踩坑)}等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！