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了，相信你們很快就能夠放心大膽的用這些新技術了）~~~