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了,相信大家很快就可以放心大胆的用这些新技术了)~~~

阅读 11.2k

推荐阅读
慢慢沉淀
用户专栏

自己在前端路上的积累,沉淀和总结

6 人关注
8 篇文章
专栏主页