vue 后台管理系统

最近几周都在和小伙伴做vue 相关的项目，废话不多：https://github.com/SuYaru/westWorld

        vue 相对之前的框架来说，又进步了一大步。主要在于它的模块化开发和数据的双向绑定，期间也有vuex 是单向数据流，但是单向数据流在React 中会体现的更好。

        vue 是属于mvvm框架中的一种。与js 、jq 相比mvvm 的意思就是，不需要再人为获取数据，一旦在页面上的数据发生修改，就可以直接拿到数据本身，而不是通过各种元素名称或节点名称再拿到数据。 这其实也就是数据双向绑定的原理，把重心都放在数据上。

       使用时主要体现在插值表达式和数据的双向绑定。就比如典型的要在一个 input 框里传入后台数据，在vue 中只要使用 

{{ name }}

这样的插值表达式形式即可。通常使用时，是通过安装vue 环境来搭建整个项目的脚手架，在 vue 环境的选择中，可以有 webpack-simple 、webpack 等，具体使用哪个vue 模版类型，可以从 https://github.com/vuejs-templates  找到合适的模版。不同模版的适用范围也不同。

      除了使用提供的模版进行初始化，我们还使用了 vue-cli3 工具。相对于之前的手动安装模版、依赖、配置环境等，vue-cli3 在使用指令 vue ui 后，会提供一个可视化界面。这样可以更方便安装项目依赖

      同时 运行项目，可以很容易的检测项目运行状态

     当然这里为了充分发挥vue 的优势：简单快速、开发周期短、文件小等优势，对文件进行打包压缩也是它的一个重要功能之一。因为依赖的文件通常很大，如何将依赖完整导入项目，又要保证文件大小足够的小，这也是 Vue 解决的一个关键问题。

      下图可以看出，将build.js 完整打包时，其大小有2600多k（这里为了上线，原本的build.js 大小有760k，而map 文件是测试用的文件，相对来说更大）。这里将760k 压缩到目标的120k 是一个很大的优化。这里主要用了 懒加载功能（插件的按需引用，会减少到400k 左右），最后一步用的是打包成压缩包 gZip 指令，压缩完成后的大小就可以达到120k ，基本符合要求。

        Ui 框架用的 是 iview ，因为在 vue 的主流框架 element 、iview、mint ui 等当中，选择了iview 。选择的主要原因是其表格表单功能的强大。因为Vue 本身遵循的是 SPA （单页面应用）原则，适用于后台管理系统和移动端开发，所以会选择表格表单更加强大的 iview 作为ui 框架。

        当然项目过程中也会发现，常用的日期插件  moment  ，富文本编辑器 quill 都可以与 ui 结合用以丰富其功能。