前言
因为要开发本科毕设，做一个校友交流平台，正好想记录下整个开发过程，同时也分享给各位。当然那些需求调研的，前期设计的就省略啦。
项目大概是一个全栈的项目，使用的IDE是vscode（期间涉及一些插件、配置推荐），大概的项目技术栈:
vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize
前端就用vue-cli3来搭建，后端就用egg-init来搭建，比较简单，官方文档也比较详细。
项目技术栈
前端：
- 前端MVVM框架：vue | https://vuejs.org/
- 路由管理：vue-router | https://router.vuejs.org/
- 状态管理：vuex | https://vuex.vuejs.org/
- 国际化：vue-i18n | https://kazupon.github.io/vue-i18n/
- 组件库：element-ui | https://element.eleme.io/#/zh-CN
后端：
- 后端MVC框架：egg | https://eggjs.org/
- ORM框架：sequelize | http://docs.sequelizejs.com/
- 数据库：mysql | https://www.mysql.com/
其他：
- vue脚手架：vue-cli3 | https://cli.vuejs.org/zh/
- css预处理器：sass | https://sass-lang.com
- javascript编译器：babel | https://babeljs.io/
- 代码检测：eslint | https://eslint.org/
- 代码格式化：prettier | https://prettier.io/
- 版本管理：git | https://git-scm.com/
搭建前端
在这里使用官方推荐的脚手架：vue-cli3，可以对照着官网教程看我的文章
1.全局安装vue-cli3
npm install -g @vue/cli-service-global
2.创建项目
vue create stuer
注意：vue-cli3命令要用到你系统的默认命令行，不然选择的配置会不正确。比如我windows系统使用cmd命令行才行，使用git bash命令行就出问题。当然官方也提示了：
通过方向键移动到我们想要的配置那一行enter选择就行，最下面一行是手动配置选项。
这里因为我之前已经手动配置一套配置了：Vue + Vuex + VueRouter + Eslint + Prettier + Babel，所以这次可以直接选择这套配置。
当然手动选择的话，也就同样选择这些配置就好
当完成后，你的整个目录大概是这样子：
值得一提的是，vue-cli3官方还提供了vue-ui，可以让你以图形界面的方式管理、创建、配置、监控你的项目，非常Nice。（建议使用图形界面方便点）
项目搭建好后可以运行下看是否搭建成功
npm run serve
3.配置Eslint和Prettier
Eslint一款代码规范工具，搭配prettier可以发挥eslint的威力，可以极大的规范我们的代码，同时提升我们的开发效率 。
先给vscode安装eslint的和prettier的插件，我安装了下列这些，可以看到里面有eslint和prettier了。
然后配置vscode中的配置文件 setting.json，这里我给下我的配置。
里面设置了eslint和prettier的选项，不过这些规则主要是作为基础规则。
设置完这个后，当我们保存代码时就会自动格式化，并且还会按照.eslintrc.js和.prettierrc的具体配置文件来格式化代码。
{ "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "workbench.iconTheme": "vscode-icons", "workbench.colorTheme": "Monokai", "editor.fontSize": 16, "editor.wordWrap": "on", "update.channel": "none", "eslint.validate": ["javascript", "javascriptreact", "html", "vue"], "prettier.eslintIntegration": true
