从零开始，构建电子地图网站：0_12_创建工程VUE2脚手架+element布局+router路由

前端框架很多，vue相对来说上手快点，所以这里选用vue。

地图js api也很多，百度、高德、腾讯、天地图都有，都是基于其自身的地图地图封装的，我们这里选择一个更经典、更原生的leaflet，这样就可以不囿于地图底图限制，且leaflet是瓦片加载，性能更好些。

写程序，不管是后端，还是前端，跟造房子有点像，都需要先有框架，再往里面填塞。

我们的前端程序，大致是这么个步骤。

1.先用vue搭建个工程出来。

2.用element做个布局。

3.用leaflef加载个地图。

4.axios跟后端交互个数据。

5.webpack打包，整合进后端。

 

闲话少叙，进入环境搭载。

 

 

 

一、安装nodejs

下载个吻合电脑版本号的安装程序：http://nodejs.cn/download/。

一直安装下去即可。

然后配置一下系统和环境变量。

安装与配置方法参见：

https://www.cnblogs.com/liuqiyun/p/8133904.html

先运行一下：npm i -g npm，把版本升级至最新版，这个注意下，因为不升级，安装模块的时候，容易报错。

随便安装个模块试一试。

运行：npm i express -g。

i其实就是install的简写。

 

二、搭建VUE2脚手架

以管理员身份打开cmd。

1. 切换路径

切换到D:\gismap\git路径下，我把前端工程放在这里。

d:

cd gismap

cd git

1. 全局安装webpack

Webpack是一个打包工具，webpack和webpack-cli两个都全局安装一下吧。

npm install webpack -g

npm install webpack-cli -g

查看webpack版本：

webpack -v

 

1. 全局安装脚手架vue-cli

为了避免安装过程中出现错误，安装程序一直下载不下来，我们清除一下缓存，并更新一下源。

清缓存：

npm cache clean –force

换源：

npm config set registry http://registry.cnpmjs.org

查看npm源：

npm config get registry

查看vue版本

vue -V

 

 

安装脚手架：

npm install --global vue-cli

 

 

1. 用vue-cli新建项目

就在git这个文件夹下面新建项目。

vue init webpack vue-gismap

出现? Project name (vue-gismap)，直接回车，我的工程就是这个名字。

出现？Project description (A Vue.js project)，直接回车，我的工程描述就是这个。

出现?Author……，直接回车，工程建立者就是我。

出现?Vue build(User arrow keys)，直接回车，默认推荐的Runtime+Compiler。

出现?Install vue-router? (Y/n)，敲y，安装路由。

出现?Use ESLint to lint your code? (Y/n)，敲n，不安装ESlint管理代码，这个对初学者不太友好，不允许有一点点代码不规范。

出现?Setup unit tests with Karma + Mocha? (Y/n)，敲n，不安装单元测试。

出现?Setup e2e tests with Nightwatch(Y/n)?敲n，不要这个，要不然写程序的时候，会经常出现警告。

出现？Should we run ‘npm install’ for you after the project has been created?，直接回车，选默认的yes,user NPM。以后都用npm安装模块。

 

 

等待安装就可以了。

出现提示：

To get started:

cd vue-gismap

npm run dev

照着做就行。

运行完，提示Your application is running here: http://localhost:8080

打开网页，长这样。说明工程搭建成功。

 

 

1. 安装element

Ctrl+C，退出dev界面。

安装element，就不用自己设计界面了。

应用可参见官方文档：https://element.eleme.cn/#/zh-CN/component/quickstart

npm i element-ui -S

安装vue-awesom，各种icon都在这里。

npm i vue-awesome -S

安装normalize.css

npm install –save normalize.css

 

 

1. 配置sublime

用管理员权限打开sublime，用这个IDE编写前端。

Shift+ctrl+p，输入install package control，安装，最下面深灰色进度条，注意一下有93%这样的进度，等几分钟会跳出提示框，提示安装成功，重启sublime。

别重启，输入install package，安装。

再安装下vue syntax hightlight，代码颜色提示。

再安装下color highlight，颜色提示，例如#fff上面就是白色，#000上面就是黑色。

再安装下HTML-CSS-JS Prettify，代码规范化插件，ctrl+A，右键——HTML/CSS/JS Prettify——Prettify Code。

重启sublime。

打开sublime，File——open folder，打开vue-gismap文件夹。

 

三、布局

1. 样式效果

一样一样来，先做一下页面布局。

大概长这个样子：顶部三个tab标签，历史地图、专题地图、帮助文档；左侧一栏树状复选框，用以选择朝代，中间部分是地图，右侧是一个可隐藏的表，用以显示属性。

 

 

 

布局采用了layout+container，路由用的是router，左侧的树状结构是tree控件，右侧点击“打开嵌套表格的drawer”，弹出的是drawer控件，内嵌table控件。

1. 文件结构

文件结构如下图所示，src文件夹下有components、js、router三个文件夹。

安装完vue脚手架，在src文件夹下会生成一些默认的文件夹和组件，不需要的直接删掉就可以，右键——new file/new folder，新建需要的文件和文件夹即可。

 

3.main.js

这个文件，主要是把用到的一些依赖导入，这些依赖都在文件夹node_modules下。

 

// 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 ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import NormailizeCss from 'normalize.css'

import 'vue-awesome/icons'

import Icon from 'vue-awesome/components/Icon'