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

2024年1月29日 203次阅读 来源: wslicknet

前言

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

    原文作者：wslicknet
    原文地址: https://segmentfault.com/a/1190000007689034
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞