一、腳手架生成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地图例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。