纯新手如何安装 Vue 以及引入 SuperMap iClient3D for WebGL 包

本文主要是介绍纯新手如何安装 Vue 以及引入 SuperMap iClient3D for WebGL 包,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

纯新手如何安装 Vue 以及引入 SuperMap iClient3D for WebGL 包

  • Vue 安装
    • 安装 NodeJS
      • 1. 官网下载 NodeJS
      • 2. 安装 msi 文件
    • 检查 NPM 版本
      • 3. 查看 npm 版本
      • 4. 查看 npm 本地目录
      • 5. 淘宝镜像 NPM
    • 获取并安装 Vue
      • 6. 检查是否能正确获取 Vue 信息
      • 7. 检查 PATH 并新增 NODE_PATH
      • 8. 安装 Vue 和 Vue-cli
    • 创建 Vue 项目
      • 9. 创建新的 Vue 项目
  • WebGL 包引入
    • 配置 WebGL 环境
      • 1. 加入 Cesium 环境
      • 2. 参考 Vue 官网开始开发
    • 加载三维球
      • 3. Vue2 加载三维球
      • 4. Vue3 Composition API 加载球
  • 其他参考资料

作者:jjz

  本文介绍了初次接触Vue时详细的安装和配置方法,对于 Vue2 和 Vue3 均有详细说明。第一部分内容涉及配置 NodeJS、下载速度更快的淘宝镜像 npm、安装 Vue 和 Vue-Cli。第二部分则介绍了在 Vue 项目中引入 SuperMap iClient3D for WebGL,并给出示例代码,如何加载出三维球。文末提供实用连接,请务必参考。

Vue 安装

安装 NodeJS

1. 官网下载 NodeJS

NodeJS 官网链接
推荐最新稳定版(左侧),安装时目录从C改成其他非系统盘。

NodeJS官网下载页面

2. 安装 msi 文件

命令行 (cmd) 输入 node -v 验证是否安装成功。

检查 NPM 版本

3. 查看 npm 版本

npm -v 验证 npm 版本高于3。

4. 查看 npm 本地目录

npm list –global

发现在C盘,需要挪回D盘。首先在nodejs安装目录新建两个文件夹 node_global 和 node_cache。然后将 nodejs 安装目录的“完全控制”权限给当前 user,不然下一步会报错 ERR! Error: EPERM: operation not permitted,具体操作请参考这篇百度经验的1 - 6步 。然后 cmd 以下两句将本地目录挪到 D 盘,需要替换为自己的目录。

npm config set prefix  "D:\Program Files\nodejs\node_global"
npm config set cache  "D:\Program Files\nodejs\node_cache"  

重新检查下npm本地目录,发现目录已经改变。

5. 淘宝镜像 NPM

国内访问 npm 下载慢,用淘宝镜像解决这一问题。

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config list #检查是否安装成功。
npm config get registry #检查是否正确设置镜像站,应返回 https://registry.npmjs.org/

获取并安装 Vue

6. 检查是否能正确获取 Vue 信息

npm info vue 返回类似 vue@2.6.12 | MIT | deps: none | versions: 309 等为正常,ERR .... 则需为文件夹设置用户权限。

7. 检查 PATH 并新增 NODE_PATH

检查系统环境变量中有nodejs的安装目录;加入 node_global 路径。在环境中新建NODE_PATH,路径为 node_global/node_modules 所在目录。

8. 安装 Vue 和 Vue-cli

# vue 3 安装
cnpm install vue@next
# vue-cli 安装
cnpm install vue -global
cnpm install -g @vue/cli #(最新版安装方法)
vue -V #(大写)安装完毕后测试查看是否安装成功

创建 Vue 项目

9. 创建新的 Vue 项目

首先 cmd 切到项目所在盘,如E盘,然后创建文件夹并 cd 到该文件夹。

  1. vue-cli 2.0版本创建项目
    vue init webpack testVueApp
    提示要先执行 cnpm i -g @vue/cli-init

  2. vue-cli 4.0版本创建项目
    vue create test_app (项目名称不能有大写)
    完成后执行新项目创建,会自动安装 package.json 中的依赖,如果项目目录下没有 node_modules 就手动运行 cnpm install 即可。

WebGL 包引入

配置 WebGL 环境

1. 加入 Cesium 环境

将 SuperMap iClient3D for WebGL 包中的 Cesium 放到 Vue 项目的 static (Vue 2.0) 或者public (Vue 3.0) 目录下。

2. 参考 Vue 官网开始开发

Vue 官网 API

加载三维球

3. Vue2 加载三维球

请参考Vue开发环境配置入门或者动态引入资源

4. Vue3 Composition API 加载球

// Composition API: https://vue3js.cn/vue-composition-api/
import { onMounted } from "vue";
// 页面上其他组件引入,加载球不需要
import setup from "../Locations";export default {name: "CesiumViewer",components: { "comp-setup": setup },props: {sceneURL: {type: String,},},setup() {onMounted(() => {try {initViewer();} catch (error) {console.log(error);}});return {};},
};function initViewer(params) {if (window.viewer) {window.viewer.destroy();window.viewer = null;}let viewer = new Cesium.Viewer("cesiumContainer", { navigation: false });window.viewer = viewer;
}

其他参考资料

  1. Vue3 配套资料
  2. Composition API 组合式 API 资料
  3. 支持中心教程
    注:Vue 3.0 不再需要 /* eslint-disable */ 也可正常运行
  4. 支持中心动态引用 Cesium 资源教程
  5. Webpack + Vue

这篇关于纯新手如何安装 Vue 以及引入 SuperMap iClient3D for WebGL 包的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/744977

相关文章

虚拟机Centos7安装MySQL数据库实践

《虚拟机Centos7安装MySQL数据库实践》用户分享在虚拟机安装MySQL的全过程及常见问题解决方案,包括处理GPG密钥、修改密码策略、配置远程访问权限及防火墙设置,最终通过关闭防火墙和停止Net... 目录安装mysql数据库下载wget命令下载MySQL安装包安装MySQL安装MySQL服务安装完成

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

SQL server数据库如何下载和安装

《SQLserver数据库如何下载和安装》本文指导如何下载安装SQLServer2022评估版及SSMS工具,涵盖安装配置、连接字符串设置、C#连接数据库方法和安全注意事项,如混合验证、参数化查... 目录第一步:打开官网下载对应文件第二步:程序安装配置第三部:安装工具SQL Server Manageme

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.