7.5来到苏小研报道，7.10正式参加实习工作，布置的任务要求就是熟悉vue框架，然后按要求完成一个demo。从最初的慌，懵到此刻的静，定，这一个月的学习还是很有收获的，特记录一下。
项目地址：https://github.com/happy8silence/PMO.git。
项目运行：npm install npm run serve
这个项目的技术栈是vue+vuex+vue-router+axios+Element-UI,其中vue-router用来管理路由，vuex状态管理，axios用来http请求。
环境配置：
1、安装nodejs
2、安装npm
3、安装最新版本的vue脚手架npm install –g @vue/cli
4、安装 element-ui npm i element-ui -S
5、安装 vuex npm install vuex -s
6、安装 axios npm install axios
7、安装 scss npm install node-sass –save-dev
npm install sass-loader –save-dev
这些安装完，就可以新建一个vueproject vue create test，根据需要选择对应安装项，然后cd test 运行npm run serve就可以启动vue工程。
demo中首先引入需要用的组件和样式，然后进行路由配置，我首先完成footer和header组件，在App.vue中引入header组件，这样当header以下的内容根据路由跳转时，header仍存在。接着在Home.vue中引入table组件和footer组件，展示demo的主页面。
本demo的难点就在于table组件的内容交互。1、组件间的交互是通过props传值，emit反传递事件。2、flex布局实现等分，可以通过css的calc()方法计算宽度 3、有多个过滤条件时，$refs.table.column.filteredValue可以存放每列的筛选信息.4、渲染表头可以用jsx，只需安装插件。5、分页组件的绑定 6、详情评分都是弹窗显示.7、时间筛选需要先将时间格式化
demo的主页面
选择筛选信息的页面
既可以显示筛选信息，也能在表格中过滤
评分弹窗页面
其中，由于table与分页组件绑定，如果使用自带排序和筛选，只能按页进行，所以重写了排序和筛选方法，进行所有信息过滤并显示 。至此，本demo基本就完成了，总结起来很容易，实则写的过程中遇到了很多奇奇怪怪的问题，最重要的就是坚持，不能从入门到放弃