从零开始的VUE项目–01（前期准备和前台vue搭建）

前端：VUE (2.9.6) （编码工具：Visual Studio Code）

后台：ASP.NET Web API (编码工具：Visual Studio 2019）

数据库：MYSQL （可视化工具：MYSQL-Front）

基本框架：Element UI
代码svn地址（用户名：liu，密码;123）无编辑提交权限
在线系统（用户名：liu，密码;12345）普通用户

这系列文章很好，好得很

一、前期准备：

①已安装好npm，②已全局安装webpack和vue-cli，③在线arcgis js api（我用的是3.14，这个文件是用nginx1.19.1发布的），发布很简单，将链接：https://pan.baidu.com/s/18EewlEIq96tcBQlqx79Thw
提取码：41na

里的文件解压后放到nginx-1.19.1的html文件夹里，然后找到conf文件夹的nginx.conf文件，配置如下：

#user  nobody;
#==工作进程数，一般设置为cpu核心数
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {#==最大连接数，一般设置为cpu*2048worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;#==客户端链接超时时间keepalive_timeout  65;#gzip  on;#当配置多个server节点时，默认server names的缓存区大小就不够了，需要手动设置大一点server_names_hash_bucket_size 512;#server表示虚拟主机可以理解为一个站点，可以配置多个server节点搭建多个站点#每一个请求进来确定使用哪个server由server_name确定server {#站点监听端口listen       1570;#站点访问域名server_name  localhost;#编码格式，避免url参数乱码charset utf-8;#access_log  logs/host.access.log  main;#location用来匹配同一域名下多个URI的访问规则#比如动态资源如何跳转，静态资源如何跳转等#location后面跟着的/代表匹配规则location / {#站点根目录，可以是相对路径，也可以使绝对路径root   html;#默认主页index   arcgis_js_v314_api/arcgis_js_api/library/3.14/3.14/dojo/dojo.js index.html index.htm; #(将vue的dist文件夹(打包后的文件)里的文件放到html文件夹里)#解决html文件访问本地json文件或本地文件谷歌浏览器跨域问题add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials: true;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-        Type,Authorization';if ($request_method = 'OPTIONS') {return 204;}}#location / {# try_files $uri $uri/ /index.html;#}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#    proxy_pass   http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#    listen       8000;#    listen       somename:8080;#    server_name  somename  alias  another.alias;#    location / {#        root   html;#        index  index.html index.htm;#    }#}# HTTPS server##server {#    listen       443 ssl;#    server_name  localhost;#    ssl_certificate      cert.pem;#    ssl_certificate_key  cert.key;#    ssl_session_cache    shared:SSL:1m;#    ssl_session_timeout  5m;#    ssl_ciphers  HIGH:!aNULL:!MD5;#    ssl_prefer_server_ciphers  on;#    location / {#        root   html;#        index  index.html index.htm;#    }#}}

点nginx.exe运行nginx，打开地址

http://localhost:1570/arcgis_js_v314_api/arcgis_js_api/library/3.14/3.14/init.js

出现内容，说明成功发布了

二、创建VUE项目：

1，使用vue-cli创建VUE前端项目

首先找一个地方新建文件夹(我放在D盘下，命名为Project)，然后用命令行进入该文件夹目录，输入命令：

vue init webpack test

test就是自定义的项目名，输入命令后，会跳出几个选项自己填一填就好了

构建完成：

现在项目文件夹里就有很多文件了：
用Visual Studio Code打开test文件夹，然后快捷键CTRL+·打开终端(·就是ESC下方的波浪号键)，输入下方命令启动项目：

npm run dev

启动成功，打开地址http://localhost:8081(默认为8080，我这里是因为8080端口被另一个程序占用了)。

可以自己改一下端口号，打开config文件夹的index.js文件
host对应的localhost就是指主机名

port对应的8080指的就是端口号

autoOpenBrowser设置为true就可以在启动项目时自动打开浏览器，不用再想上面一样手动输入地址了。

当鼠标光标在终端时，快捷键CTRL+C出现终止批处理操作吗(Y/N)? ，输入y，结束项目
我们再输入：

npm run dev

启动项目，发现项目自动在浏览器打开了
现在项目创建好了，接下来就要开始完善项目了

2，初步做一下主页和菜单，引入Element UI框架样式

像一般的系统一样，我们这个系统应该需要一个主页，主页上面有菜单，菜单功能应该主要由弹窗来承载，好，开始做。

首先在src文件夹的components文件夹里新建Home.vue文件作为主页：

在Home.vue里输入vue
然后回车，一个默认的页面框架就出现了
对了，经常CTRL+S保存一下，防止意外出现代码没保存，

随便在Home.vue上写点东西
下面就要让我们这个Home.vue变成默认的主页

打开src文件夹下router文件夹里的index.js文件，

首先引入我们的Home.vue

import Home from '@/components/Home'

然后在下面的routes里仿照HelloWord配置我们的Home.vue，这里要注意哪个页面的path被设置成 ‘/’，那它就是默认页面了，所以我们把Home.vue的path设置成 ‘/’，委屈HelloWorld.vue，它的path就设置成 ‘/hi’了，反正以后也用不到了。

最后结果：
这时，保存一下代码，发现我们的系统界面变成这样了
图片也用不到，在App.vue里，去掉就行了，下面要搞菜单栏了。
突然发现，好像报错了，代码格式写的不严谨
解决措施(不管了)：找到build目录下的webpack.base.conf.js文件，注释掉其中的与有关的eslint规则即可（就是已经注释掉的那句）
然后用上面的命令，关闭，启动，好，没错了
菜单栏生成用的是Element UI的el-menu（NavMenu 导航菜单），所以要引入Element包

npm i element-ui

在src文件夹的components文件夹里新建Menu.vue文件作为菜单栏，
然后把Menu.vue作为组件引入到Home.vue中

最后的Home.vue就是这个样子
而系统界面就变成了这个样子
让我们稍微修改一下Menu.vue文件，这里使用固定的值生成菜单栏，后面再实现从数据读取数据动态生成

<template><div><el-menu class="el-menu-demo"background-color="#1f5f9a"text-color="#fff"active-text-color="#ffd04b"mode="horizontal"><template v-for="item in NavigateItem"><el-submenu v-if="item.items.length":index="item.key":key="item.key"><template slot="title">{{ item.title }}</template><el-menu-item v-for="(items, key) in item.items":key="key":index="items.key">{{ items.title }}</el-menu-item></el-submenu><el-menu-item v-else:index="item.key":key="item.key">{{ item.title }}</el-menu-item></template></el-menu></div></div>
</template><script>
export default {data () {return {activeIndex: 1,menuList: [],NavigateItem: [],};},created () {this.getMenuList();},methods: {getMenuList () {//这就是我们后台传过来的菜单栏信息，是一个字符串，下面我们来对它进行处理var jsonStr='[{"Id":"1","Name":"地图功能","P_id":"-1","Icon":"map","Url":""},{"Id":"1001","Name":"地图查询","P_id":"1","Icon":"","Url":""},{"Id":"1002","Name":"专题图","P_id":"1","Icon":"","Url":""},{"Id":"2","Name":"数据管理","P_id":"-1","Icon":"data","Url":""},{"Id":"2001","Name":"数据管理","P_id":"2","Icon":"","Url":""},{"Id":"3","Name":"系统维护","P_id":"-1","Icon":"maintenance","Url":""},{"Id":"3001","Name":"业务日志","P_id":"3","Icon":"","Url":""}]'//将字符串转成数组var jsonObj = JSON.parse(jsonStr)var jsonArr = [];for (var i = 0; i < jsonObj.length; i++) {jsonArr[i] = jsonObj[i];}this.menuList = jsonArr;//将菜单的父菜单和子菜单分开this.menuList.forEach((item, index) => {if (item["P_id"] == -1) {this.NavigateItem.push({title: item["Name"],key: item["Id"],path: item["Url"],icon: item["Icon"],items: [],})}else {this.NavigateItem[item["P_id"] - 1].items.push({title: item["Name"],key: item["Id"],path: item["Url"],icon: item["Icon"],})}})  }},
};
</script>
<style scoped>
.el-row {width: 200px;
}
</style>

看一下系统界面，好像不太对劲，F12一下，果然，报错了
原来是因为前面的element-ui只是安装了，还没有引用，赶快在src文件夹的main.js文件里引用一下，顺便把element-ui的中文包也引用了

import ElementUI from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en' //英文
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //中文
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI,{ zhLocale },
)

刷新一下页面，好了
修改一下样式

App.vue的样式改成这样

<style>
html,body,#app{width:100%;height:100%;margin: 0px;padding: 0;position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow: hidden;user-select: none;
}
</style>

Home.vue的样式改成这样

<style scoped>
.home,main{height: 100%;
}h1,
h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

div上加个home类
菜单栏父菜单加点图片

链接：https://pan.baidu.com/s/1o8GUxudunhQ9HS8b15nlPw
提取码：m4iz

现在该让点击子菜单弹出弹窗了，直接用别人写好的方法

链接：https://pan.baidu.com/s/1bmLs8Tw5N3Eb0X7P1190dQ
提取码：ed51

将解压好的layer文件夹放到src文件里的components文件夹里，别忘了引用一下，打开src文件夹下的main.js文件，改完之后就变成了这样

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en' //英文
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //中文
import 'element-ui/lib/theme-chalk/index.css'
import layer from '../src/components/layer/layer.js'Vue.config.productionTip = false
Vue.use(ElementUI,{ zhLocale },
)
Vue.prototype.$layer=layer(Vue)/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

已运行就报错了，分析原因是缺少依赖，那就安装

npm install less less-loader --save-dev

好的，旧错消失了，新错又来了，分析一下是刚才安装的less-loader版本过高(在package.json文件里可以查看所安的模块的版本)，只好卸掉重装一个版本低的，

卸掉：

npm uninstall less-loader

安装指定版本：

npm install less-loader@5.0.0

重新运行，可以了

现在我们在src文件夹下新建一个views文件夹用来放置我们的菜单弹窗

在views文件夹里新建4个vue空白文件，我将其命名为MapQuery.vue，ThematicMap.vue，DataManagement.vue，BusinessLog.vue

在Menu.vue里添加select事件（菜单激活回调）

@select="handleSelect"

在Menu.vue里引入这四个页面

import MapQuery from '../views/MapQuery.vue'
import ThematicMap from '../views/ThematicMap.vue'
import DataManagement from '../views/DataManagement.vue'
import BusinessLog from '../views/BusinessLog.vue'

handleSelect方法：

//菜单激活handleSelect (key) {switch (key) {case "1001":this.$layer.iframe({content: {content: MapQuery,parent: this,},area: ["550px", "570px"],title: "地图查询",maxmin: true,shade: false,shadeClose: false,resize: true,cancel: () => {//关闭事件this.$layer.close(this.layerid);},});break;case "1002":this.$layer.iframe({content: {content: ThematicMap,parent: this,},area: ["550px", "570px"],title: "专题图",maxmin: true,shade: false,shadeClose: false,resize: true,cancel: () => {//关闭事件this.$layer.close(this.layerid);},});break;case "2001":this.$layer.iframe({content: {content: DataManagement,parent: this,},area: ["550px", "570px"],title: "数据管理",maxmin: true,shade: false,shadeClose: false,resize: true,cancel: () => {//关闭事件this.$layer.close(this.layerid);},});break;case "3001":this.$layer.iframe({content: {content: BusinessLog,parent: this,},area: ["550px", "570px"],title: "业务日志",maxmin: true,shade: false,shadeClose: false,resize: true,cancel: () => {//关闭事件this.$layer.close(this.layerid);},});break;default:break;}},

刷新一下页面，看看效果
弹窗头部的关闭按钮都看不见了，赶快改改样式，在src文件夹下新建style文件夹，在style文件夹下新建blue.css文件，后面我们要改样式主要就在这里面修改好了，blue.css内容为这

/* 弹窗样式 开始 */.vl-notify.vl-notify-alert h2.vl-notice-title {background-color: rgba(8,79,144, 0.9) !important;height: 32px !important;line-height: 32px !important;color: white !important;
}
.vl-notify.vl-notify-main{border: none !important;
}/* 放大缩小关闭按钮样式 */.vlicon-mini:before,
.vlicon-max:before,
.vl-notify.vl-notify-alert h2.vl-notice-title .icon-remove:before,
.el-icon-close:before {color: white;
}

别忘了在main.js里引用一下

import './style/blue.css'

现在系统的框就初见端倪了

3，esri-loader加载地图

背景空空的，决定放幅地图上去，于是就要引入esri-loader模块了

npm install esri-loader@2.16.0

别忘了在main.js里引用
在config文件夹里新建config.js文件，我们将前面发布的arcgis js api地址放到config.js文件里，

//地图js
window.arcjsUrl = 'http://localhost:1570/arcgis_js_v314_api/arcgis_js_api/library/3.14/3.14/init.js'
//地图css
window.arcCssUrl = "http://localhost:1570/arcgis_js_v314_api/arcgis_js_api/library/3.14/3.14/esri/css/esri.css"

在main.js文件里引用一下

import MAP from '../config/config'

在arcgis js api下引用天地图，Map.vue如下

<template><div class="mapContainer"><!-- 地图 --><div ref="viewDiv"style="width:100%;height:100%"></div></div></template>
<script>
import esriLoader from 'esri-loader'  //地图加载器
export default {data () {return {};},computed: {},mounted () {this.arcgisInit(this.$refs.viewDiv);},methods: {/*** 初始化地图*/arcgisInit (div) {var that = this;//arcgis api js文件const options ={url: window.arcjsUrl};console.log(window.arcjsUrl)//arcgis api css文件esriLoader.loadCss(window.arcCssUrl);esriLoader.loadModules(["esri/map","esri/layers/TileInfo","esri/layers/WebTiledLayer","esri/geometry/Point","dojo/dom","dojo/on","dojo/domReady!"],options).then(([Map]) => {//创建地图var mapPoint = new esri.geometry.Point([117.124674, 36.657017], new esri.SpatialReference({ wkid: 4490 }));var config = {width: "100%",logo: false,zoom: 4,slider: false,fadeOnZoom: true,center: mapPoint//force3DTransforms: true};var map = new esri.Map(div, config); //ersi.Map类是一种容器，其中可以放置图层等。div为显示地图的DIV；config为地图相关参数设置//通过瓦片形式加载天地图，设定瓦片信息var tileInfo = new esri.layers.TileInfo({"rows": 256,//瓦片行编号"cols": 256,//瓦片列编号"compressionQuality": 0,"origin": {"x": -180,"y": 90},"spatialReference": {"wkid": 4490},"lods": [{"level": 2,//level:当前缩放级别,包括两个参数：resolution:比例尺和scale:分辨率"resolution": 0.3515625,"scale": 147748796.52937502},{"level": 3,"resolution": 0.17578125,"scale": 73874398.264687508},{"level": 4,"resolution": 0.087890625,"scale": 36937199.132343754},{"level": 5,"resolution": 0.0439453125,"scale": 18468599.566171877},{"level": 6,"resolution": 0.02197265625,"scale": 9234299.7830859385},{"level": 7,"resolution": 0.010986328125,"scale": 4617149.8915429693},{"level": 8,"resolution": 0.0054931640625,"scale": 2308574.9457714846},{"level": 9,"resolution": 0.00274658203125,"scale": 1154287.4728857423},{"level": 10,"resolution": 0.001373291015625,"scale": 577143.73644287116},{"level": 11,"resolution": 0.0006866455078125,"scale": 288571.86822143558},{"level": 12,"resolution": 0.00034332275390625,"scale": 144285.93411071779},{"level": 13,"resolution": 0.000171661376953125,"scale": 72142.967055358895},{"level": 14,"resolution": 8.58306884765625e-005,"scale": 36071.483527679447},{"level": 15,"resolution": 4.291534423828125e-005,"scale": 18035.741763839724},{"level": 16,"resolution": 2.1457672119140625e-005,"scale": 9017.8708819198619},{"level": 17,"resolution": 1.0728836059570313e-005,"scale": 4508.9354409599309},{"level": 18,"resolution": 5.3644180297851563e-006,"scale": 2254.4677204799655}]});//基础地图// 经纬度矢量地图瓦片的URL: http://t4.tianditu.com/DataServer?T=vec_c&X=27&Y=3&L=5//，域名中的 t4 部分代表子域字段，X是列编号，Y是行编号 ，L是当前缩放级别。对这几个部分用列表里的参数替换，后面再加上key,就变成了下面的样子var baseMap = new esri.layers.WebTiledLayer("http://{subDomain}.tianditu.com/DataServer?T=vec_c&X={col}&Y={row}&L={level}&tk=35f5a8d92de539752d6a5c885d978380", {"copyright": "Tianditu","id": "Tianditu","subDomains": ["t0", "t1", "t2"],//经查询天地图瓦片分别有t0,t1,t2,t3,t4,t5,t6,t7八个子域"tileInfo": tileInfo});//添加图层map.addLayer(baseMap);//标注成var baseMapMarker = new esri.layers.WebTiledLayer("http://{subDomain}.tianditu.com/DataServer?T=cva_c&X={col}&Y={row}&L={level}&tk=35f5a8d92de539752d6a5c885d978380", {"copyright": "Tianditu",//版权，Web平铺层提供程序的归属。它显示在网络地图的归属中。将图层添加到Web地图时用户所需的输入。"id": "Tianditu2",//图层的唯一标识字符串。"subDomains": ["t0", "t1", "t2"],//子域，如果检测到子域，则必须指定它们。地图查看器通过解析{subDomain}的templateURL值来检测Web Tiled图层是否具有子域。"tileInfo": tileInfo //包含空间参考和图层的平铺方案。通常从WMTS OGC Web服务检索。如果缺少该图层，则必须使用WGS 1984 Web Mercator（辅助球）拼贴方案。});//将图层baseMapMarker添加到地图上map.addLayer(baseMapMarker);//地图中心点map.centerAt(new esri.geometry.Point({"x": 117.124674,"y": 36.657017,"spatialReference": {"wkid": 4490}}), 13);//地图级别map.setLevel(13);//关闭键盘导航//map.disableKeyboardNavigation()map.on('extent-change', function () {});})},},
};
</script><style lang="css">
.mapContainer {width: 100%;height: 100%;
}
.infoBox {position: absolute;bottom: 10px;right: 10px;height: 30px;background-color: #1f5f9a;opacity: 0.95;
}.infoBox .positionInfo {color: white;font-size: 0.5em;line-height: 30px;margin: 0 10px;
}
.infoBox .map-legend {cursor: pointer;
}
.blurInfo {display: none;position: absolute;top: 10px;right: 5px;font-size: 1.25em;font-family: monospace;color: #4c4c4c;width: 240px;background-color: #ffffff;padding: 10px;border: 2px solid #57585a;border-radius: 20px;
}
.blurInfo p span {background-color: #ffffff;padding: 0 5px;border-radius: 5px;
}
.blurInfo input[type="range"] {width: 100%;display: block;
}
</style>

这就看起来好多了

4 ，我们再修饰一下页面

地址栏这#总觉得不太需要，让我们去掉它，

在router文件夹的index.js文件里加上这么一句话就行了

mode:"history"

test，网页名称，让我们另外起一个名字，

在index.html文件将

<title>test</title>

改成

<title>信息管理系统</title>

然后那个小地球明显是一个图标的位置，我们找一张图片，格式改成.ico，将这个文件放到static文件夹里，然后在index.html里加上这么一句

<link rel="icon" href="./static/favicon.ico">

结果：
好的，这一篇内容到这里就结束了了，下一篇中，我们将实现构建后台，从数据库读取数据生成菜单栏和登录登出功能