前端工程化（三）---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>实际的例子：
1 <template>
2 <Modal v-model="showFlag" :width="width" :mask-closable="false" :closable="false">
3 <p slot="header" style="color:#f60;text-align:center">
4 <Icon :type="customHeader.icon"></Icon>
5 <span>{{customHeader.title}}</span>
6 </p>
7 <div style="text-align:center">
8 <slot name="content">请定义具体显示内容</slot>
9 </div>
10 <div slot="footer">
11 <Button type="text" size="default" :loading="modal_loading" @click="cancel1">取消</Button>
12 <Button type="primary" size="default" :loading="modal_loading" @click="confirm1">确认</Button>
13 </div>
14 </Modal>
15 </template>
16
17 <script>
18
19 export default {
20 data: function () {
21 return {
22 modal_loading: false,
23 showFlag: false,
24 onConfirm: 'confirm',
25 onCancel: 'cancel',
26 updateFlag:false //是否为新增操作
27 }
28 },
29 props: {
30 customHeader: {
31 title: '标题',
32 icon: 'information-circled'
33 },
34 width: {
35 type: Number,
36 default: 500
37 }
38 },
39 methods: {
40 confirm1() {
41 this.$emit(this.onConfirm,this.updateFlag)
42 },
43 cancel1() {
44 this.$emit(this.onCancel)
45 this.showFlag = false
46 },
47 showAdd() {
48 this.updateFlag = false
49 this.showFlag = true
50 },
51 showEdit(){
52 this.updateFlag = true
53 this.showFlag = true
54 },
55 hide() {
56 this.showFlag = false
57 }
58 }
59
60 }
61 </script>
62
63 <style scoped>
64
65 </style>2、定义组件之间共享的数据
在根Vue中定义数据
1 import Vue from 'vue'
2 import App from './app.vue'
20
21 //资源
22 import Data from './assets/data/data.json'
66 new Vue({
67 data:{
68 dict:Data
69 },71 render: h => h(App)
72 }).$mount('#app')使用：在子组件中，通过this.$root.dict.fileServerPath引用
1 <template>
40 </template>
41
42 <script>
43 export default {
44 data() { 79 },
80 methods: {124 },
125 watch: {
126 defaultFiles: function (newV, oldV) {
127 debugger
128 newV.forEach(e => {
129 e.url = this.$root.dict.fileServerPath + e.url
130 e.status = 'finished'
131 this.$refs.upload.fileList.push(e)
132 })
133 }
134 },
135 mounted() {
136 this.uploadList = this.$refs.upload.fileList;
137 }
138 }
139 </script>
140
141 <style scoped>
178 </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前端的开发围绕着上面的方式进行
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-05-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读