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

最新推荐文章于 2024-10-25 18:42:48 发布

原创

最新推荐文章于 2024-10-25 18:42:48 发布 · 910 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文指导如何在已安装Node.js和Express的基础上，修复Vue CLI命令未识别问题，并演示如何通过脚手架生成项目并修改为包含3D地图功能。步骤包括添加vue.cmd到环境变量，以及修改app.vue实现自定义地图效果。

一、脚手架生成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