Vue+Webpack+OpenLayers6完成组件化的WebGIS开发（一、项目搭建）

一、Vue环境构建

1、安装Vue-cli脚手架

因为需要使用 npm 安装 Vue cli，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/  下载即可。下载完成以后打开cmd查看node和npm是否已经安装好：

如上图所示表示已经安装好了node和npm。

之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为 ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，但是要注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

然后再安装vue-cli脚手架即可，命令如下：

npm install -g vue-cli

2、使用vue-cli构建前端项目

首先在cmd命令界面进入项目文件夹如下：

然后执行命令 vue init webpack vuemap，这里 webpack 是以 webpack 为模板指生成项目， vuemap是我们的项目名称，大家也可以起别的名字。

这里询问我项目名称是不是 vuemap，直接回车确认就行。接下来请大家按照我截图中的方式构建：

然后等待webpack给我们自动构建项目即可。

显示上面界面的时候说明我们构建完成了，下面输入npm run dev命令启动即可，在这儿要注意一下，启动的时候要去vuemap的文件夹下启动，使用cd命令进