前序内容请观看：点这儿！
写个小站的业务可能大家也不是太关心，反而页面的实现效果是最关心的，这里我就先讲前端的部分。
先说说涉及到的技术栈,首先是Vue.js，作为现在最火的前端框架，不多说啥了；接着是Element-UI，为什么选择这个，不仅仅是饿了么的实力，更多的我是按照Github的星数选择的；关于一些icon，阿里的iconfont是我最喜欢的，不过这里有一个小坑，等会会分享一下；最后是一些插件，因为Vue现在和TS的切合度还有待提升，这里我还是选择了JS，Vue-route，jslint都是常用的一些就不多说了，还有就是axios用来实现后端数据读取。
目录
BUG
架构
Template
Axios
BUG
1. 开发环境下，尽管后端我使用了flask-cors来解决跨域，但是好像没啥用，而再生产环境下是生效的，所以在开发环境下还是要设置proxytable:
//vue.config.jsmodule.exports = {devServer: {proxy: 'http://localhost:4000'}
}在“axios”获取后端路径直接去掉端口号之前的部分即可。
在生产环境，因为后端使用了flask-cors，所以把这个设置再改回来才行。详见跨域。
2. 我也不知道为什么，iconfont的在线引用总是找不到。因为想要彩色的icon，所以使用了symbol的格式，但是symbol的代码我不知放在哪儿，在index.html和main.js里面都试过了，然而都不行。最终还是下载下来，不用在线获取的话可以让读取的性能更好一点，但是更新的话可能会麻烦点。下面是下载下来icon font后的使用指南：
首先把文件夹放在"assets"文件夹里面，在main.js里面引用一下：
import './assets/font/iconfont.js'然后在.vue中使用即可。
<svg class="icon" aria-hidden="true" style="padding: 20px 50px"><use xlink:href="#icon-github"></use></svg>.icon {width: 5em; height: 5em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}3. 图片。基础薄弱，连个图片也难倒我了。
最后还是用的element自带的<el-image>,下面是轮播图使用的部分代码。
<el-carousel-item v-for="item in items" :key="item"><el-imagestyle="width: 450px; height: 300px":src=item:fit="fit"></el-image></el-carousel-item>items{imgURL1: require('@/assets/lunBo/1.jpg'),...
}架构
因为是单页面，整个项目架构也没太注意：
vue-router中使用的三个分页面我放置在了component中。
Template
在App.vue中，主要使用了Element自带的布局方法，头组件，两边栏，加main页面，因为todo类的应用和日期关系很大，所以右边栏直接放置了Element的日历（偷懒！），左边栏主要是存链接，主要工作量还是在实现CRUD和其他功能的main页面里。
具体代码，按照element的内容写，真的非常方便。
Axios
这个也是简单的看看手册就可以用了，下面是简答的示例代码。
getTableData () {axios.get(this.path).then((res) => {this.tableData = res.data}).catch((error) => {console.error(error)})},因为前端遇到的坑确实不是很多，这里只是大致介绍一下业务代码。有待学习和优化的还有很多，所以这篇对于熟悉Vue的价值不大，记录下来供自己反省把！
