山东大学项目实训-地图圈系统-web开发（1）

一、Vue.js的安装：

本项目使用Vue进行网页端开发，故首先需要安装Vue.js。

使用NPM安装方法：

1.Node.js安装：

从node.js官网下载并安装node，安装过程比较简单，故不在此赘述。

使用win+r运行cmd，输入node -v命令：

出现了版本号，证明node.js安装成功。

本项目安装Vue使用npm进行安装，但是npm资源不全在国内，导致安装无法正常进行，经过查找资料，发现需要使用国内镜像cnpm进行安装。

2.安装cpnm：

经过查找资料，在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 即可成功下载cnpm：

（由于事先安装没有截图，此时截图内容为安装后的更新界面）

3.安装vue-cli脚手架：

在命令行中运行命令 npm install -g vue-cli ，来进行vue-cli脚手架的安装

用vue -V来查看是否安装成功：

至此，所有基本的环境以及工具都已安装完成。

4.Vue ui的安装：

图形用户界面给计算机在大众间的普及带来了关键性作用。一个良好的ui不仅可以使得程序员在开发项目时，使他们工作效率加快，而且还可以使用户体验做到最佳。基于此，以及我在操作linux系统敲命令行代码时的苦恼，我决定使用Vue ui来进行项目的创建。

使用 cnpm install -g @vue/cli 进行Vue ui的安装。安装结束后，在命令行执行vue ui命令：

会显示这个vue ui的页面。在这里，我就可以进行项目的创建、插件的下载安装以及依赖包的下载安装。

二、创建一个Vue项目：

点击创建项目：

在D盘的map文件夹下创建一个新的Vue项目。

点击下一步，选择默认，再点击创建项目。

创建项目后，会在项目区有所展示：

单击进入项目仪表盘：

在此处可以进行插件和依赖的安装。

点击插件：

可以看到预安装的插件。为了使项目开发更为简便，本项目使用element-ui为主要ui设计模块。故还需要添加额外的插件vue-cli-plugin-element。

添加插件栏目在右上角，搜索并安装即可。

同理，项目的依赖包也需要添加一些，不在此做赘述了。至此，该Vue项目的创建告一段落。

三、将该Vue项目导入到IDEA中：

本项目使用IntelliJ IDEA 2020.1 x64来完成该Vue项目的开发。

首先需要把刚才创建的Vue项目导入到IDEA中。

1.下载Vue插件：

位置：File–>setting–>plugins

2.导入map项目：

位置：File–>open，直接打开该map项目即可：

至此，开头已经打好，下面便开始大型开发环节了。

更新中……