当前位置:首页 > vue.js技术文章 > vue.js的vue-cli脚手架中使用百度地图API的实例

vue.js的vue-cli脚手架使用百度地图API的代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:86

这篇文章主要知识点是关于vue.js、vue-cli、脚手架、百度地图API、vue.js的手脚架vue-cli项目搭建的步骤 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js项目实战

Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

查看详情

vue.js的vue-cli脚手架中使用百度地图API的实例

第一步,去百度地图开发者申请密钥。

1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用)

vue.js的vue-cli脚手架中使用百度地图API的实例

2.密钥申请成功后

vue.js的vue-cli脚手架中使用百度地图API的实例

第二步,在项目的需要模板中引入,具体如下:

vue.js的vue-cli脚手架中使用百度地图API的实例

项目路径

其中index.html存放地图链接,代码如下

在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看

选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=jspopular

vue.js的vue-cli脚手架中使用百度地图API的实例

然后在某模板  例:APP.vue里面实现,代码如下

  <template> 
   <div id="app"> 
    <div id="allmap" ref="allmap"></div> 
    <router-view></router-view> //切记模板中一定要有渲染
   </div> 
  </template> 
  <script> 
  export default { 
   name: 'App', 
   methods:{ 
    map(){ 
     let map =new BMap.Map(this.$refs.allmap); // 创建Map实例 
     map.centerAndZoom(new BMap.Point(114.30, 30.60), 11);// 初始化地图,设置中心点坐标(经纬度/城市的名称)和地图级别 
     map.addControl(new BMap.MapTypeControl({//添加地图类型控件 
      mapTypes:[ 
       BMAP_NORMAL_MAP, 
       BMAP_HYBRID_MAP 
      ]})); 
     map.setCurrentCity("武汉");// 设置地图显示的城市 此项是必须设置的 
     map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 
     //map.setMapStyle({style:'midnight'});//地图风格
    } 
   }, 
   mounted(){ 
    //调用上面个的函数
    this.map() 
   } 
  } 
  </script> 
  <style> 
  #app { 
   font-family: 'Avenir', Helvetica, Arial, sans-serif; 
   -webkit-font-smoothing: antialiased; 
   -moz-osx-font-smoothing: grayscale; 
   text-align: center; 
   color: #2c3e50; 
   margin-top: 60px; 
  }   
  /*设置地图的宽高*/
  #allmap{ 
   height: 500px; 
   overflow: hidden; 
  } 
  </style> 

在html页面中使用百度接口步骤也如上面所示

如有不足请谅解!希望给您带来帮助。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对码农之家的支持。如果你想了解更多相关内容请查看下面相关链接

vue.js的手脚架vue-cli项目搭建的步骤

手脚架是什么?

众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了。

我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli,

但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效。

然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的模板(存放在不同的服务器上)复制到本地作为项目初始结构, 官网给出了两个模板: webpack-simple 和 webpack 两种。

两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能,普通项目基本用webpack-simple 就足够了。

我用的是wbpack这个。

关于自己是否能搭建一套手脚架,这个是肯定的,只有自己写好模板,放在github上就OK了。在以后的项目搭建就可以使用自己搭建的手脚架了。

vue-cli的使用

在这里,由于我使用的代码编辑器是vs code,所以我就按着vs code的界面来展示;

下面讲到其他命令在其他的带有终端的代码编辑器也可以使用

第一步:安装vue-cli

npm install -g vue-cli

vue.js的手脚架vue-cli项目搭建的步骤

安装完成后,可以通过命令

vue list 查看有哪些模板可以调用;

vue.js的手脚架vue-cli项目搭建的步骤

第二步:搭建项目目录

命令格式:vue init <template-name> <project-name>

<template-name>:指上方的众多模板;

<project-name>: 指自己项目的名称;

例如:我使用的是webpack这个模板:  vue init webpack vuetest

vue.js的手脚架vue-cli项目搭建的步骤

第三步:安装依赖

进入新建立的文件夹里面:

命令格式:cd vuetest

在文件夹里面去安装依赖

命令格式:npm install

注意:

不用使用cnpm 淘宝这包管理器来安装依赖,这样会缺失比较多的东西;

虽然用npm去下载依赖很慢,毕竟连的是国外的链接;

下面是以来所在的地方:

vue.js的手脚架vue-cli项目搭建的步骤

第四步:直接运行

命令格式:npm run dev

直接在终端里面输入这段命令就OK了;

默认是本地的8080端口:

vue.js的手脚架vue-cli项目搭建的步骤

vue.js的手脚架vue-cli项目搭建的步骤

到这里已经OK了!

使用webpage模板搭建的vue项目目录就OK了;

注意:

在运行 npm run  dev 中可以使用  cnpm run dev 来代替。

其中

安装cnpm

命令 npm install -g cnpm --registry=https://registry.npm.taobao.org

其他用法和npm差不过。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vuex的实例用法教程、 Vue2实现组件props双向绑定、 vue中的watch监听数据变化及、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:在vue项目中使用layui框架的方法及采坑总结

下一篇:element-ui的隐藏组件el-scrollbar的实例用法

展开 +

收起 -

vue.js调用百度地图API 相关内容
Spring Boot+Vue全栈开发实战

传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

查看详情
前端工程师必备技能:Vue移动开发实战技巧

Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

查看详情
Vue.js快速入门

目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

查看详情
Vue企业开发实战

本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

查看详情
Vue.js实战

尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

查看详情
Vue.js前端开发:快速入门与专业应用

本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

查看详情
vue.js调用百度地图API 学习笔记
网友NO.272647

在vue-cli搭建的项目中增加后台mock接口的方法

用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现成的后台可以调用,基本上都是自己写mock进行模拟。 在vue-cli搭建的项目中,框架上用的是express的web框架,要做一个mock是很方便的。 假设前端页面上需要获取所有的新闻列表,那么就需要mock一个能够返回所有新闻列表数据的接口。 接下来就在项目中实现mock功能。 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vue-mock-demo 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意)。 ? Project name vuestrap? Project description A Vue.js project? Author 省略? Vue bu……

网友NO.101462

详解Vue-cli中的静态资源管理(src/assets和static/的区别)

你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢? 资源打包 为了回答这个问题,我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径,并且会被Webpack视为一个模块依赖来解析。 因为./logo.png并非一个Javascript,当将它作为模块依赖对待时,我们需要用url-loader和file-loader去处理它。这种公式化处理早已经为你配置了loader,所以你基本上可以获得诸如文件名指纹和有条件的内嵌base64,因此你能够使用相对/模块路径而不必担心部署问题。 自从这些资源可以在build期间被内联/复制/重命名,它们本质上来讲是你资源代码的一部分。这就是为什么它们被推……

网友NO.479028

vue-cli单页应用改成多页应用配置详解

前言 从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目。 技术栈 vue: 2.0.1 vue-resource:1.0.3 vue-router:2.0.0 webpack:1.13.2 gulp:3.9.1 ES6 运行 git clone https://github.com/dawnyu/vue-cli-multipage.gitnpm install npm run buildnpm run dev 改造后的目录 可以多目录生成目标文件 公共的js和样式图标放到assets文件夹即可 修改点 build/utils.js var path = require('path')var config = require('../config')var glob = require('glob') // 将样式提取到单独的css文件……

网友NO.685385

vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法

由于最新版本的vue-cli已经放弃 dev-server.js ,需在 webpack.dev.conf.js 配置才行 新版本的webpack.dev.conf.js配置如下: const express require('express')const app =express()var appData = require('..data.json')var seller = appData.sellervar goods = appData.goodsvar ratings = appData.ratingsvar apiRoutes = express.Router()app.use('/api', apiRoutes) 找到devServer后,在最后面添加: before(app) { app.get('/api/appData',function(req,res){ res.json({ errno:0, data:appData }) }), app.get('/api/seller',function(req,res){ res.json({ errno:0, data:seller }) }), app.get('/api/goods',function(req,res){ res.json({ errno:0, data:goods }) }), app.get('/api/ratings',function(req,res){ res.json({ errno:0, data:ratings }) }) } 最后一定要重启才会生效,因为修改了配置文件,重新跑一次npm run dev. 打开路径 http://localhost :8080/api/appData就能请求到数据 打开 http://localhost :8080/api/seller 能请求到seller相关数据 如图: 总结……

网友NO.270701

vue-cli之router基本使用方法详解

本文实例为大家分享了vue-cli之router基本使用的具体代码,供大家参考,具体内容如下 1、在src目录下新建router目录,再建立index.js import Vue from 'vue';import VueRouter from 'vue-router';import goods from '@/components/goods/goods';Vue.use(VueRouter);export default new VueRouter({ routes: [ { path: '/', redirect: {name: 'goods'} }}); 代码中@是在webpack.base.conf.js里修改的配置,目的是每一次引入组件之类的文件都要写相对路径太麻烦,直接用@代替即可,配置修改如下 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } } 2、入口文件main.js里引入并挂载到节点上 import router from './router';/* eslint-disable no-new */new Vue({ el: '#app', router, template: 'App/', components: { App }}); 3、在例如App.vue文件中使用,点击即可切换路由,内容则呈现在router-view容器中 template div id="app" div class="tab" router……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757