微信公众号北京赛车平台下载
通过前两部分的总结,项目具备了一个可以运行的前端工程。接下来的工作就是具体的功能开发了,我选择了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>
实际的例子:
View Code
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
前端的开发围绕着上面的方式进行