前端工程化（三）---Vue的開發模式

從0開始，構建前后端分離應用

 

導航

前端工程化（一）---工程基礎目錄搭建

前端工程化（二）---webpack配置

前端工程化（三）---Vue的開發模式

 

 

通過前兩部分的總結，項目具備了一個可以運行的前端工程。接下來的工作就是具體的功能開發了，我選擇了Vue作為前端的框架，使用iView作為UI庫。

建議在使用Vue開發之前一定要通讀 Vue官網教程 對Vue中的基本概念及整體的思想有一個基本的認識。最好的教程莫過於官方文檔了，不要上來就各種百度，從一些只言片語中摸索，這樣會少走彎路。

個人感覺使用Vue進行開發，首先要改變以往前端開發中形成的思維模式。對於頁面元素的操作，由原有的dom操作轉換為數據操作。

dom操作的事情，Vue已經替我們干了，我們只需要關注數據就可以了。頁面元素同數據進行了綁定（實際上是Vue模板的元素，只不過Vue的設計擁抱原生的html語法，看上去模板的元素與原生的html元素長得一樣），當數據變化的時候，dom也隨之變化。

 

1、Vue的開發模式：定義一個擴展名為.vue的文件，其中包含三部分內容，模板、js、樣式

<template lang="html">
</template>

<script>
export default {
 
}
</script>

<style lang="css" scoped>
</style>

 

實際的例子：

<template>
    <Modal v-model="showFlag" :width="width" :mask-closable="false" :closable="false">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon :type="customHeader.icon"></Icon>
            <span>{{customHeader.title}}</span>
        </p>
        <div style="text-align:center">
            <slot name="content">請定義具體顯示內容</slot>
        </div>
        <div slot="footer">
            <Button type="text" size="default" :loading="modal_loading" @click="cancel1">取消</Button>
            <Button type="primary" size="default" :loading="modal_loading" @click="confirm1">確認</Button>
        </div>
    </Modal>
</template>

<script>

    export default {
        data: function () {
            return {
                modal_loading: false,
                showFlag: false,
                onConfirm: 'confirm',
                onCancel: 'cancel',
                updateFlag:false  //是否為新增操作
            }
        },
        props: {
            customHeader: {
                title: '標題',
                icon: 'information-circled'
            },
            width: {
                type: Number,
                default: 500
            }
        },
        methods: {
            confirm1() {
                this.$emit(this.onConfirm,this.updateFlag)
            },
            cancel1() {
                this.$emit(this.onCancel)
                this.showFlag = false
            },
            showAdd() {
                this.updateFlag = false
                this.showFlag = true
            },
            showEdit(){
                this.updateFlag = true
                this.showFlag = true
            },
            hide() {
                this.showFlag = false
            }
        }

    }
</script>

<style scoped>

</style>

 

2、定義組件之間共享的數據

在根Vue中定義數據

import Vue from 'vue'
import App from './app.vue'

//資源
import Data from './assets/data/data.json'
new Vue({
    data:{
68       dict:Data
69     },71     render: h => h(App)
}).$mount('#app')

使用：在子組件中，通過this.$root.dict.fileServerPath引用

<template>
</template>

<script>
    export default {
        data() { 79         },
        methods: {124         },
        watch: {
            defaultFiles: function (newV, oldV) {
                debugger
                newV.forEach(e => {
 e.url = this.$root.dict.fileServerPath + e.url 130                     e.status = 'finished'
                    this.$refs.upload.fileList.push(e)
                })
            }
        },
        mounted() {
            this.uploadList = this.$refs.upload.fileList;
        }
    }
</script>

<style scoped>
</style>

 

 

3、定義Vue公共組件的方式

方式一

//公共組件
import wolfTotem from './components/common/WolfTotem.js'
//將組件暴露為全局的句柄
window.WT = wolfTotem

 

方式二

import MyLayout from './layout.vue'

const _layout = {
  install:function(Vue){
    Vue.component('WtLayout',MyLayout)
  }
}

export default _layout

//自定義組件
import WtLayout from './components/layout/layout.js'

//織入
Vue.use(WtLayout)

方式三

import HttpUtil from './assets/js/httpUtil.js'
Vue.prototype.$http = HttpUtil

 

 

 前端的開發圍繞着上面的方式進行