WebGIS实战：前端开发环境搭建(nvm、node、vue cli)

相关Web GIS实战信息：
下一篇博客：WebGIS实战：Web GIS开发环境配置

1、前言

Web GIS依托于Web技术，因此也离不开Web的相关框架。本节主要讲的是如何从零开始搭建一个前端开发环境，下一节将以此作为基础，对该开发环境进行具体配置，使得满足Web GIS开发。

注意：目前将计划发表30篇关于Web GIS实战的博客，为了能使您更快地阅读到关于Web GIS实战的内容，请感兴趣的同学关注我！】

博主的初始开发配置：

• 开发平台：Windows7 X64
• 集成平台：IDEA2020
• Python版本：3.6【使用Vue-Cli需要用到】
• Java版本：1.8

2、nvm部署

nvm：用于管理电脑中多个node.js版。因为有时候不同的项目使用不同的node版本，而在运行时只能使用一个node版本，为了应对一台电脑能够兼容不同的node版本，所以产生了这个能自动切换node版本的工具。
下载地址：https://github.com/coreybutler/nvm-windows/releases
安装步骤1：设置nvm安装路径【注意安装路径不能含有汉字、空格】
安装步骤2：设置node库
安装步骤3：检查安装信息

安装步骤4：重启电脑，并输入nvm检查安装是否成功。如果出现下面信息，说明安装成功

3、node.js部署

安装完nvm后，就需要下载需要的node.js版本了
步骤1：输入nvm list avaliable查看有哪些版本可以使用
步骤2：输入nvm install 版本号，安装指定的node版本。
【注意：v15.0.0及以上的版本不支持windows7系统，最低版本的Windows8.1】
步骤3：为了满足其他低版本node项目需要，安装低版本的node
步骤4：输入nvm ls，查看当前安装了哪些node版本
步骤5：输入nvm on，启动nvm的版本控制
步骤6：输入nvm use 版本号，切换其他版本
步骤7：输入npm config set registry https://registry.npm.taobao.org，设置当前node版本的npm镜像

注意：其他nvm命令行

  nvm arch                     :查看电脑的位数
  nvm install <version> [arch] : 下载指定的node版本，默认64位
  nvm list [available]         : 查看当前电脑安装的所有node版本
  nvm on                       : 启动nvm的node管理
  nvm off                      : 关闭nvm的node管理
  nvm proxy [url]              : 设置代理
  nvm node_mirror [url]        : 设置下载node的镜像
  nvm npm_mirror [url]         : 设置下载npm的镜像
  nvm uninstall <version>      : 卸载指定的node版本
  nvm use [version] [arch]     : 切换(使用)指定的node版本
  nvm root [path]              : 查看或设置nvm的安装路径
  nvm version                  : 查看nvm的版本

4、Vue项目框架部署

步骤1：输入npm install -g @vue/cli，下载Vue的脚手架
步骤2：输入vue -V，检查是否安装完成
步骤3：输入vue ui，启动可视化Vue脚手架
步骤4：创建项目
步骤5：填写项目基本信息
步骤6：填写项目配置
勾选：

• choose vue version(默认是Vue2.*，具体哪个版本视项目决定)
• Babel
• Router
• VueX
• CSS-Pre
• Linter
• Unit Testing
• E2E Testing
• 使用配置文件

对应的配置：


步骤7：查看创建的项目

步骤8：用IDEA打开WebGIS项目
步骤9：输入npm install，安装vue相关的库
步骤10：输入npm run serve，运行WebGIS项目
步骤11：按住Ctrl + C，输入Y，结束运行WebGIS项目
步骤12：使IDEA能够识别vue文件，需要安装vue.js插件

5、下一步计划

至此，从零开始搭建一个通用的基于Vue框架的前端项目就完成了。

接下来，需要对这个项目进行配置，使其成为一个Web GIS项目。

请关注博主，获得最新的Web GIS实战信息！谢谢大家。

下一篇博客：WebGIS实战：Web GIS开发环境配置