山东大学软件学院创新实训——项目记录（一）

一、Vue脚手架搭建

开始项目：

 npm install -g @vue/cli
 
 vue --version
 
 vue create innovation-traing
 
 cd innovation-traing
 npm run serve

二、git初始化

1.本地git仓库

git init

2.远程git仓库

选择gitee作为团队的远程仓库存放处。

项目远程地址：

https://gitee.com/a-little-sleepy/innovation-training.git

3.本地仓库映射到远端

git remote add origin https://gitee.com/a-little-sleepy/innovation-training.git

git remote -v # 查看本地项目的映射状况

三、本地前端项目初始化

1.vue项目的目录结构

2.组件库的安装

本次项目准备使用一些常见的组件库来辅助开发，如element-ui用来构建主体框架，e-charts用来帮助图表绘制。

npm i element-ui -S
npm i echarts -S

3.前端系统主框架布局

准备采用路由映射的方式来进行页面之间的互相跳转。

用导航菜单来管理路由：

<el-menu :default-active="$route.path" router class="el-menu-demo"  mode="horizontal" style="margin-bottom: 10px;">
            <el-menu-item index="/home">
              <i class="el-icon-eleme"></i>
              <span style="">首页</span>
            </el-menu-item>

            <el-menu-item index="/upload">
              <i class="el-icon-eleme"></i>
              <span>图片上传</span>
            </el-menu-item>
            <el-menu-item index="/record">
              <i class="el-icon-eleme"></i>
              <span>电子病历</span>
            </el-menu-item>
            <el-menu-item index="/conversation">
              <i class="el-icon-eleme"></i>
              <span>对话</span>
            </el-menu-item>
          </el-menu>

采用横式的导航栏：