2020/6/29 学习知识汇聚平台：Vue配置学习

项目刚开始，初步决定使用IDEA Springboot+Vue进行前后端开发

小组成员按功能分为平台、测试管理、教师端、学生端四个小组，我负责教师组前端的开发工作。分组后对于需求在进行了分析讨论。

大致为以下构造：

可以看到教师和学生端的功能以及前端架构可以有很大的复用空间，所以接下来的工作预计与学生端前端共同讨论进行。

在进行需求分析后，由于对于IDEA并没有使用经验，所以先尝试对于IDEA Vue进行初始配置：

一.准备工作

    Vue是前端开发框架。搭建框架，首先要搭建环境。搭建Vue的环境工具：node.js（JavaScript的运行环境），然后再用nodejs里面的npm（包管理和分发工具）来安装依赖包。

二.安装node.js

    下载地址：https://nodejs.org/zh-cn/

三.检查是否安装成功

打开终端输入代码检查：

显示版本信息，安装成功

四.打开IDEA准备创建项目并进行配置

1.打开IDEA创建一个 Static Web 项目

2.打开Terminal（注意切换到管理者模式，不然可能会报错）

安装npm的阿里镜像，原生npm下载依赖包过慢，镜像可以提高下载效率。

输入指令：输入后等待安装完成

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

安装Vue的脚手架工具vue-cli：

npm i -g vue-cli

测试是否安装成功：
 

vue -V

安装webpack工具：

cnpm install -g webpack

五.基本工具安装完成后，开始创建项目

vue init webpack 项目名

等待一段时间后进行基本安装回答：

按以下步骤回答（创建的时候没截图TAT，网上找了一个）

创建完成后，我们还少一个文件夹：nodo_modules,这个文件夹是整个项目依赖包的文件夹。

第一步：cd test进入test的项目

第二步：cnpm install (此处可以用cnpm代替npm,如果你安装了阿里的镜像)

安装完成后的项目结构：

在idea中打开上边新建的vue项目，在idea中的Terminal中输入：

cnpm run dev

运行成功展示：htttp://localhost:8080

点击链接就可以看到初始界面啦！