Vue+Flask+Leaflet+Element Puls框架搭建详细流程介绍（1）

本文介绍软件，环境配置，Vue3.0，Element Plus部分。更多内容还在创作中......

软件：Vscode（推荐）、Pycharm

版本：Vue3.0、node 22.1.0、npm 10.7.0（项目搭建时间2024.05）

其他：leaflet-geoman、turf、axios、jQuery

目录

1、安装Vscode软件

2、安装node.js

3、安装Vue3.0

（1）进入到目标文件夹下

（2）在终端中输入命令

（3）安装依赖包

（4）配置Vue路由

（5）配置

（6）启动项目

4、安装Element-Plus

（1）安装

（2）引入

（3）使用

---

1、安装Vscode软件

Visual Studio Code 简称 VSCode ，2015 年由微软公司发布。

官网下载地址：https://code.visualstudio.com/

2、安装node.js

官网地址：https://nodejs.p2hp.com/

建议安装最新版本，安装后需要配置电脑环境变量。

查看版本信息的命令：

node -v

npm -v

 安装完成后在cmd中查看node和npm的版本信息，如下就是安装成功了。

3、安装Vue3.0

Vue的安装有两种方式：脚手架、Vite。现在常用脚手架安装，但是个人觉得脚手架安装如果出现错误不方便修改，个人更喜欢用Vite。下面是Vite安装方法：

打开项目所在文件夹，打开终端命令。

（1）进入到目标文件夹下