vue.js轻松搞定后台管理项目

前言

Vue.js的数据驱动视图，双向绑定的机制，对于须要频繁操做DOM的后台管理项目而言，真的是极大的提升了生产力。本身第一次把Vue用到后台项目上时，感受很是爽。如今来简单记录下，建议你们也能够去尝试下。

目录结构

vue是一种mvvm结构，因此，对于以前的MVC结构而言，它主要是改变了view层的处理方式。因此，PHP的controller基本不变，view用自定义vue组件写便可，不必定是所有view页面都用vue写，能够只在你想用vue的地方使用vue组件，别的地方依然能够用原来的代码结构。
view文件部分代码：

<div id="app">
    <my-component></my-component>    //注意，这里  'my-component'要写成短横线-链接的形式，由于HTML不识别大小写，驼峰和Pascal case会不识别
 </div>

<!--在view里引入你用Vue写的js代码便可，例如<script src=""></script>-->

项目js入口文件：

import 'babel-polyfill'
import Vue from 'vue' // 1.0.24
import MyComponent from '../components/my_component'  //这里是你本身的单文件组件的真正代码，../是相对路径

Vue.config.devtools = true  //开启devtool调试，不然没法使用vue-devtools工具调试

new Vue({
    el: "#app",
    components: {
        'my-component': MyComponent   
    }
})

my_component.vue文件就是一个本身写的单文件组件，也就是你们常见的包含<style> <template> <script>的文件。webpack中需加入对.vue文件的模块处理配置。

<style lang="sass">
//这里是当前template的样式，lang="sass"是指定sass预编译器
</style>
<template>
<!--这里放组件的HTML模板，最好是有一个顶级的div包着，防止片断实例-->
<div>
.......
</div>
</template>
<script>
import Vue from 'vue'
import Vue_Resource from 'vue-resource'
import Pagination from '../pagination'
import Modal from '../modal'

Vue.use(Vue_Resource)
export default {
    ready() {
        this.getBillList()
    },
    data() {
        return {}
    }
    components: {  //全部的组件要先注册再使用
        Pagination,
        Notify,
        Modal,
    },
    methods: {

    }

}

</script>

ps:CGI是PHP，前端构建工具是webpack+gulp

感想

1. Vue能够直接嵌入任何一个页面：咱们不用改变原来的工做方式，咱们能够用Vue实现任何一个部分，一个页面，甚至是一个模块。
   例如：新项目中的侧边栏，公共头尾均可以是原来的，只在业务部分嵌入用Vue写的组件，能够很容易与现有项目结合。

2. 数据驱动视图更新，双向数据绑定，咱们只须要关心数据的变化，不用管数据变了以后，页面上怎么显示，特别爽。对于后台项目的增删改查操做特别方便。少了DOM操做，bug也会少些。

3. 后台项目没有很复杂的状态管理，不像单页面应用，因此不须要使用vuex和router这种较复杂的东西，是很好的入门项目。

4. vue 2.0也已经出来一段时间了，再写项目，能够上2了

舒适提示

Vue不支持IE8，因此，用时要考虑项目对浏览器的要求哦（不过，天猫都即将不支持IE8了，相信你们很快就能够放心大胆的用这些新技术了）~~~