vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子

一、脚手架生成vue项目
1.安装脚手架：npm install -g @vue/cli
2.以图形界面创建vue项目
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
项目文件夹下执行

vue ui

自动运行创建项目的web应用，根据提示一步步创建项目

vue不是内部或外部命令解决验证方案
一、前提
1.该教程是在你已经安装配置好node.js和express情况下
2.你已经完成了vue和vue-cli的全局安装
3.完成以上2步后，使用vue指令，会显示“vue不是内部或外部命令”
二、解决步骤
1.在电脑内搜索vue.cmd
2.将vue.cmd的路径加入Path环境变量中，以；分隔，如我的路径是“E:\nodejs\node_modules\npm\node_global_modules”
3.重启cmd
三、检测
1.进入nodejs文件目录
2.输入vue -V（V大写，查看vue的版本号）

测试用例
二、修改自动生成项目，移植mapbox的例子，便于方面，直接修改自动生成的app.vue
修改后如下：yarn serve运行项目直接进入3D地图页面

<template><div id="app"></div>
</template><script>
import mapboxgl from 'mapbox-gl'export default {mounted(){this.init()},methods:{init(){mapboxgl.accessToken = 'pk.eyJ1IjoidnVlamF2YSIsImEiOiJja3E3Zmc3cnAwNWl5Mm9yenZ4dmxrdnFlIn0.xskeHvMcXwPwOeg-3Unsjg';var map = new mapboxgl.Map({style: 'mapbox://styles/mapbox/light-v10',center: [-74.0066, 40.7135],zoom: 15.5,pitch: 45,bearing: -17.6,container: 'app',antialias: true});map.on('load', function () {// Insert the layer beneath any symbol layer.var layers = map.getStyle().layers;var labelLayerId;for (var i = 0; i < layers.length; i++) {if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {labelLayerId = layers[i].id;break;}}// The 'building' layer in the Mapbox Streets// vector tileset contains building height data// from OpenStreetMap.map.addLayer({'id': 'add-3d-buildings','source': 'composite','source-layer': 'building','filter': ['==', 'extrude', 'true'],'type': 'fill-extrusion','minzoom': 15,'paint': {'fill-extrusion-color': '#aaa',// Use an 'interpolate' expression to// add a smooth transition effect to// the buildings as the user zooms in.'fill-extrusion-height': ['interpolate',['linear'],['zoom'],15,0,15.05,['get', 'height']],'fill-extrusion-base': ['interpolate',['linear'],['zoom'],15,0,15.05,['get', 'min_height']],'fill-extrusion-opacity': 0.6}},labelLayerId);});}}}
</script><style>
@import "https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css";
#app { margin: 0; padding: 0; position: absolute; top: 0; bottom: 0; width: 100%; }
</style>

vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子相关推荐

Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析首先从package.json中的脚本配置来看,np ...
Vue3.0 凉凉了？Vue 最黑暗的一天！
点击"开发者技术前线",选择"星标????" 在看|星标|留言, 真爱原来链接:https://dev.to/danielelkington/vue-s-d ...
vue脚手架项目如何加入html文件,使用vue脚手架怎么搭建项目
使用vue脚手架搭建项目的方法:1.全局安装vue-cli脚手架:2.打开命令提示符,通过cd命令进入项目所在文件夹:3.创建vue-cli工程项目:4.安装依赖:5.启动项目. 本教程操作环境:wi ...
Vue脚手架工程 - 新建项目时注意事项、与配置工程时经验总结
文章目录新建脚手架工程配置vue.config.js文件启动项目时自启动浏览器编辑演示关闭eslint检验编辑演示 less语法爆红组件名异常解决方案安装vue-router 别忘了 ...
vue3.0使用ant design of vue
在vue3.0项目中 ,想使用ant的话,尝试使用一下Antdv2.x,Antdv2.x是唐金州老师(杭州校宝在线)研发的新一代适配 Vue 3.0 的组件库,使用方式: cnpm i --save ...
Vue 脚手架CLI 初始化项目
1 介绍 CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架. Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及 ...
Vue脚手架创建TS项目
What is TS? TS语言,也就是TypeScript,是前端一个非常强大的语言超集,基于JavaScript. TS的强大吸引了许许多多的前端开发者学习使用. TS最大的特点,就是在JavaS ...
Vue脚手架安装及项目搭建（mac版)
前提:电脑上已经安装好了npm vue脚手架全局安装终端命令 $ sudo npm install -g vue-cli 安装完成之后检测 $ vue -V 如果终端输出vue的版本号,那么脚手架就安 ...

vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子

vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子相关推荐

最新文章

热门文章

vue3.0 使用vue脚手架生成vue项目 运行mapbox 3D地图例子

vue3.0 使用vue脚手架生成vue项目 运行mapbox 3D地图例子相关推荐

最新文章

热门文章

vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子

vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子相关推荐