记初学vue完成的第一个demo

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可以存放每列的