写这个东西最主要是为了交接，因为我也是菜鸡，所以估计很多操作有冗余或者根本是错的=-=，如果接手的人发现了错的话记得提醒我下~~~~~~
关于运行
github上找到分支pan
pan分支
download这个工程，可以download zip或者git clone，自行选择。
打开后工程目录应该如下（如果你不能关联到这个仓库，请先rm -rf本地文件夹里所有.git文件 防止后期push时乱七八糟 这个部分网上教程较多 关于git的知识可以问李闰民or张梓健）
整个前端工程的根目录
其中/node_modules是一些依赖文件（如果有问题的话，建议不下载这个文件夹，直接在根目录运行npm install相关指令下载依赖），/dist是打包后也就是npm run build后可以放到服务器上的文件。/public是一些静态文件。/server是我本来用nodejs写的express的服务器，现在已经不用了，不用管这个文件夹。/src文件夹是我们开发最经常用的文件夹，页面、组件、请求都在这个文件夹里。
开发的时候我们一般用本地测试，如果要在本地测试（localhost），可以（1）先将vue.config.js删掉（但请记得备份），关于vue.config.js稍后详细介绍他的配置。（2）package.json里面要修改两行命令：
package.json
将圈红部分的--host 0.0.0.0删掉（网上教程有说可不删，但不知道为什么我不删基本上没成功过...你可以测试下。）（3）/src/router.js文件要修改，注释我都写得很清楚，需要使用的时候更改下注释即可。
router.js
另外，向后端发送请求设置后端url的文件在/src/api/url.js里，关于开发、生产和测试模式请自行了解区别。
url.js
这之后，你可以使用npm run serve来运行这个项目。（前提是，你已经安装了所有依赖。）
关于开发
整个前端项目是以vue.js+element ui来构建的。
src文件夹
其中，views文件夹中包含的是主页面。也可以说是父组件，vue.js只有index.html一个html，然后views里面新建的都是vue component。
src/views文件夹
其中index.vue是搜索主页面，login.vue/register.vue实现注册登录功能，showstock.vue实现展示机器预测的明日结果，userPredicted.vue实现的是展示用户预测+机器预测+实际结果的页面。基本上每个vue包括三部分<template><script><style>，
component文件夹是子组件，在父组件中注册子组件然后写子组件，父组件可以传值到子组件之类的，大概就是比如说我主页面本来要写很多个<div>嵌套嵌套再嵌套，但是这样显得这个页面就很长了，而且有可能你很多页面都要这个<div>，那就要重复写，很麻烦，这个时候你可以写子组件，然后再需要用的页面上注册子组件。
src/component文件夹
比如说我们登录后无论哪个页面右上方都会有个人中心的下拉菜单，下拉菜单里面可以修改密码、留言等功能。这个时候我们就写子组件，然后注册到各个父组件中，然后再使用就可以了。
api文件夹和请求有关，你查看代码后会发现我在前端的请求都是这样写的：
任意一个请求
其实就是到api文件夹的stock.js中调用getRank方法，然后我们打开api/stock.js看看。
stock.js
可以看到我们用axios发送了一个post请求，请求的url为"%url%/stocks/getRank"，这个请求不用发送参数给后台。在api文件夹中可以增加任意接口，增加后要记得导出接口。怎么写导出，在api文件夹中的index.js中写。
src/api/index.js
现在和后端通信请求的地址在github上都有写，具体还不够清楚的可以问李闰民。记得每次新增请求的时候要和后台定义好数据接口格式和url请求地址等。目前所有的请求res都是json对象，status表示状态，message表示信息，如果是一个需要带回来数据的请求那么数据就放在content里面，这个你多看看我现在的代码就会懂。
（很多组件比如说你想要一个表单，一个表格，一个dialog等，直接去elementUI拿比自己写要来的快也要好）
关于部署
部署教育内网和公网两套系统，内网用tomcat容器，公网nginx容器。
部署前将我们刚才删除的vue.config.js文件复制进来。
vue.config.js
其中重要的是publicPath一定要改成"./"，否则无法正常显示。
然后再将package.json刚才删掉的--host 0.0.0.0 增加上。
接着是router.js里面改baseUrl改成相对应的，我在注释里写了。
还要记得如果后台地址有变化要改src/api/url,js。
然后执行npm run build命令，ok了后生成的dist文件夹就是你可以放到服务器上的了。
关于放到tomcat上，要放在tomcat的webapps文件夹里，然后可以重命名你的项目，项目文件夹的名字就是访问路径。
关于放到nginx上参考上一篇文章windows系统上部署vue项目到nginx。
其他
项目中我踩过的坑都在我的首页中写了，估计我代码中比较乱的就是分辨率适应的那些css，首页中还有一些入门的github操作等……因为我也是新手上路，所以写的文档估计也会有一些错误，如果你能找到更好的办法欢迎交流。另外，每次的代码，记得备份！！！！
没有提到/src/的store文件夹，这个文件夹是vuex状态管理的，我们项目中目前没怎么使用，vuex的相关参考文献可以看这篇博客vuex
网友评论