一、配置Vue开发环境 1、官网下载nodejs并配置环境
2、打开小黑窗，输入下面的代码：
npm install -g @vue/cli二、借助VueCli脚手架创建项目 1、在小黑窗里cd到项目文件夹，输入下面的代码，project_name是项目名呀，可以自定义。
vue create project_name然后会让你选择是基于Vue2还是Vue3创建项目，可以自由选择，这里我选择的是Vue2，然后要配置一些基本的东西，学识浅薄刚入门，一路默认就行hhh~
2、在小黑窗里cd到刚刚创建的项目里，然后输入下面的代码：
npm run serve
文章图片
【笔记|WebGIS前端学习之路（Vue+Leaflet地图展示）】之后会出现一个本地服务的网址，一般是localhost:8080，在浏览器里打开，出现下面的样子说明创建成功啦！
文章图片
三、 创建地图 1、在官网下载Leafletjs包并解压到项目的public文件夹下面
文章图片
2、打开src/components/文件夹下的HelloWord.vue，删掉所有的代码，修改成下面的样子
文章图片
3、打开src/文件夹目录下的index.html，引入leaflet.js和leaflet.css
文章图片
四、运行项目 1、在小黑窗输入下面的代码，并打开本地服务的网址，出现下面的样子，说明大功告成啦！
npm run serve
文章图片
推荐阅读
- uni-app|uniapp加载leaflet地图
- uniapp|uniapp中引入使用leaflet地图
- MySQL|MySQl学习笔记-6.数据库的备份
- MySQL数据库|Day1_9 Java学习之DQL语言与完整性约束
- vue|vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法
- 职业发展|猿创征文｜活在大二，前端的我勇往直前
- TypeScript|nodejs在使用async/await时报错__awaiter is not defined
- 实战|nodejs fs模块结合async await处理fs异步使用
- node|nodejs学习之旅--异步终极解决方案async和await--Ajax--浏览器访问网站的基本过程以及http详解