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

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是

一文教你Python引入其他文件夹下的.py文件

《一文教你Python引入其他文件夹下的.py文件》这篇文章主要为大家详细介绍了如何在Python中引入其他文件夹里的.py文件,并探讨几种常见的实现方式,有需要的小伙伴可以根据需求进行选择... 目录1. 使用sys.path动态添加路径2. 使用相对导入(适用于包结构)3. 使用pythonPATH环境

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Linux安装MySQL的教程

《Linux安装MySQL的教程》:本文主要介绍Linux安装MySQL的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux安装mysql1.Mysql官网2.我的存放路径3.解压mysql文件到当前目录4.重命名一下5.创建mysql用户组和用户并修