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>