以后系统更新日志写在此处，较新的更新写在前面

安装Node.js、yarn、vscode、vue-devtool。

Node.js：https://nodejs.org/en/ 安装LTS版本即可。

yarn：安装地址：https://yarnpkg.com/zh-Hans/docs/install#windows-stable 如何使用：https://yarnpkg.com/zh-Hans/docs/usage

vscode：https://code.visualstudio.com/ 请注意安装相关Vetur、TSLint、TSLint Vue、EditorConfig for VS Code四个插件

vue-devtool：https://github.com/vuejs/vue-devtools Chrome插件，用于Vuex数据流可视化开发

脚手架使用指南：https://cli.vuejs.org/guide/

部署：https://cli.vuejs.org/guide/deployment.html#platform-guides

代理：https://cli.vuejs.org/config/#devserver-proxy

yarn install # 安装依赖
yarn run serve # 启用开发环境
yarn start # 启用开发环境 并且开启假数据模拟
yarn run build # 构建项目
yarn run lint # 代码风格检查
yarn run test:unit # 单元测试

强烈推荐使用vue-cli UI构建。首先安装vue-cli，运行命令yarn global add @vue/cli，然后再当前项目目录下运行vue ui。

在UI界面中构建，可以可视化依赖相关情况。预览界面

• Vue组件类式写法：https://github.com/vuejs/vue-class-component 了解对象式写法到类式写法的转换，计算属性，方法，生命周期的转换。官方文档的解释
• Vue属性装饰器：https://github.com/kaorun343/vue-property-decorator 了解@Prop(...)，知道写法即可。有余力可以了解什么是类型反射（type reflect）？ 该库的@Prop(...)原理为此行获取到了Typescript的标注类型
• Vuex的组件类式写法：https://github.com/ktsn/vuex-class 语法糖
• Typescript文档：https://www.tslang.cn/docs/handbook/modules.html 了解什么是接口（interface），如何导入模块，如何标注一个函数的类型？接口写法通常在其他静态语言中以字母I开头，此命名方式不同人各有所爱。特别地，在本项目中，模块名中的@/是路径语法糖，表示src/。
• Sass语法：https://www.sass.hk/docs/ 了解嵌套规则、父选择器&、变量$
• Less语法和Sass语法大同小异，注意变量通常以@
• 发起请求通常是在Vuex Action中，请求到的数据通过commit mutation，将数据和状态（state）“融合”，反应到当前视图（view）中
• 本项目中一个写Vuex模块的例子todo：example.ts

写路由时，一定要在全局路由下给你的页面一个路由名字 name 字段。

所有命令式路由跳转统一风格 this.$router.push({ name: 'your-route-name' })。而不要使用 path 进行跳转，这样耦合度会降低。

命名遵循最小化描述原则，若新增一个组件A，则分支命名通常为feature/component/A。

新增特性前缀用feature/，bug修复前缀用hotfix/。

能用class选择器不用id选择器。

只有设计稿特定的像素值外，其他一律使用rem作为基本单位。1rem = 14px。

比如留一个小小的间隙：margin-bottom: 1rem;。

嵌套写法好过不嵌套写法，因为嵌套写法特定级别更高，样式规则越优先。

关于样式和element-ui样式，只有scoped有作用于的样式不起作用的时候，才使用没有作用域的样式。

而且在没有作用域的样式下，一定要嵌套写法以最小化样式冲突。

写一个组件就是写一个类，类的响应式数据（原对象中的data）应该越少越好，其他数据从原有的响应式数据通过计算属性衍生出来。

一个组件只做一件事情，比如登录表单组件，应该只包含表单，而不应该包含对话框。

尽量使用命令式语法。使用 dataSource + 模板语法增强模式。而不要在模版里生编码。见 TopNav.vue 和 LeftSider.vue 的 menu 属性。

确保Vetur安装之后，在vscode中使用快捷键shift + alt + F即可快速代码整洁化，通常只会整洁ts和less。html模板部分需要按ctrl + 逗号打开用户设置，在用户设置中设置"vetur.format.defaultFormatter.html": "js-beautify-html"即可。