纯新手如何安装 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

相关文章

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

Maven如何手动安装依赖到本地仓库

《Maven如何手动安装依赖到本地仓库》:本文主要介绍Maven如何手动安装依赖到本地仓库问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、下载依赖二、安装 JAR 文件到本地仓库三、验证安装四、在项目中使用该依赖1、注意事项2、额外提示总结一、下载依赖登

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

如何在Mac上安装并配置JDK环境变量详细步骤

《如何在Mac上安装并配置JDK环境变量详细步骤》:本文主要介绍如何在Mac上安装并配置JDK环境变量详细步骤,包括下载JDK、安装JDK、配置环境变量、验证JDK配置以及可选地设置PowerSh... 目录步骤 1:下载JDK步骤 2:安装JDK步骤 3:配置环境变量1. 编辑~/.zshrc(对于zsh

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

如何在pycharm安装torch包

《如何在pycharm安装torch包》:本文主要介绍如何在pycharm安装torch包方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录在pycharm安装torch包适http://www.chinasem.cn配于我电脑的指令为适用的torch包为总结在p