你好！ 这是2022年开始基于VUE来构建一个WebGIS项目。

1. 安装node.js

我们安装node.js，借用它自带的npm来进行包的管理。
地址：https://nodejs.org/zh-cn/
安装node.js，一直点下一步就可。
查看，npm是否安装成果，然后配置国内的镜像地址。配置镜像地址是为了后续的包下载安装更顺利，因此这一步是非必要的。

在控制台输入npm -v，来查看npm的版本号，查看安装是否成功。

// 查看npm版本号
npm -v

注意这里npm的版本号并不是下载的Node.js的版本号（16.17.0）。npm是Node.js里自带的包管理器，不同版本的node.js对应的npm版本号，请参见：https://blog.csdn.net/weixin_43025151/article/details/125513578。

配置国内的镜像地址

// 配置国内的镜像地址
npm config set registry http://registry.npm.taobao.org

// 查看镜像地址
npm get registry

2. 搭建VUE环境

VUE是目前流行的一种前端开发框架，关于VUE具体的内容可以参见官网介绍：https://cn.vuejs.org/。

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令：，来全局安装VUE CLI。

npm install -g @vue/cli //这个是从国外下载的比较慢

或者，采用淘宝的镜像源下载：

cnpm install -g @vue/cli //这个是从镜像源下载

安装好以后，也可以查看一下vue的版本号，确认是否安装成功了。

3. 创建vue项目

可以参考：https://blog.csdn.net/weixin_44882488/article/details/124220864

3.1 用cmd命令创建项目

创建一个文件，在其路径位置，敲cmd回车，进入控制台。
这里就在目录下启动了控制台（也可以先启动控制台，再进入文件）。
创建项目，起一个名字，叫webgis_2022
在控制台输入：

vue create webgis_2022 //创建一个名字叫webgis_2022的项目。

它开始问你，要创建的项目，你是想采用默认的配置，还是你要手动的设置，它提供了Vue有2版本和最近的3版本。

通过上下方向键选择对应配置，然后回车：
按空格键选择要安装的配置资源，带 * 号说明被选上了：
Vue在帮你创建这个webgis_2022项目
它创建好了，然后提示你，可以通过什么样的方式来打开启动你的项目：
这里按它的指示，输入就看启动这个项目了，在控制台输入：

cd weigis_2022 //打开你的项目文件。

npm run serve //启动你的项目

直接点击它给的地址就可以看到项目目前的效果了。

3.2 停止启动的项目

停止服务
两下Ctrl+C 或者Ctrl+C一下然后Y

3.3 Vue3项目文件说明

文件说明
webgis_2022 -------->项目名称
--------> node_modules ----->用来管理项目中使用的依赖（就是你安装的包都在里面可以找到）
--------> public -------->项目中使用到的资源，图片等？
----------------> favicon.ico-------->网页显示的图标
----------------> index.html-------->项目主页
--------> src -------->用来书写vue的源代码【重点】
----------------> assets ----->用来存放静态资源【重点】
----------------> components ->用来书写vue组件【重点】
----------------> App.vue ---->项目中的根组件【重点】（所有的界面都在app.vue上运行）
----------------> main.js ---->项目中的主入口【重点】
--------> .gitignore ---->git版本控制忽略软件
--------> babel.config.js
--------> package.json ---->依赖的名称和版本号
--------> package-lock.json->详细的依赖版本
--------> README.md ---->项目说明文件

3.4 VScode vue 代码规范插件

这部分也可以不进行设置：

1. Vetur —— 语法高亮、智能感知、Emmet等
   包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

Vetur是一款Vue代码高亮显示的一款插件，在没有使用此插件前，以 .vue的文件名代码是没有颜色的！

2. EsLint ——  检查代码是否符合规范

4. 安装Element包

注意：配合VUE3的是element pro，而vue2使用的是element iu，根据自己的情况选择安装。
Element的官方地址：https://element-plus.org/zh-CN/#/zh-CN

在命令行或者终端输入：

npm install element-plus --save

对Element进行全局的引用，安装Element官网的介绍【快速上手】，在main.js中写入：

import { createApp } from 'vue'

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn';//解决elementpLus一些组件是英文的问题

import App from './App.vue'

const app = createApp(App) 

app.use(ElementPlus,{
    locale:zhCn
})
app.mount('#app')

查看引入的情况：在项目的package.json文件内：

5. 安装Openlayers包

根据openlayers官网的安装说明：https://openlayers.org/download/
直接在终端输入

npm install ol

这里直接在VScode的终端进行了输入，然后加载了openlayers的包：
在项目的目录下，node_modules文件夹中可以找打ol的包，里面可以看到ol的contor等内容，还有一个openlayers官方维护的ol-mapbox-style库。