前端工程化（三）---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     },     render: h => h(App)
 }).$mount('#app')

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

 <template>
 </template>

 <script>
     export default {
         data() {         },
         methods: {         },
         watch: {
             defaultFiles: function (newV, oldV) {
                 debugger
                 newV.forEach(e => {
                     e.url = this.$root.dict.fileServerPath + e.url
                     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

前端的开发围绕着上面的方式进行