导航 前端工程化（一）---工程基础目录搭建 前端工程化（二）---webpack配置 前端工程化（三）---Vue的开发模式 通过前两部分的总结，项目具备了一个可以运行的前端工程。接下来的工作就是具体的功能开发了，我选择了Vue作为前端的框架，使用iView作为UI库。 建议在使用Vue开发之前一定要通读 Vue官网教程 对Vue中的基本概念及整体的思想有一个基本的认识。最好的教程莫过于官方文档了，不要上来就各种百度，从一些只言片语中摸索，这样会少走弯路。 个人感觉使用Vue进行开发，首先要改变以往前端开发中形成的思维模式。对于页面元素的操作，由原有的dom操作转换为数据操作。 dom操作的事情，Vue已经替我们干了，我们只需要关注数据就可以了。页面元素同数据进行了绑定（实际上是Vue模板的元素，只不过Vue的设计拥抱原生的html语法，看上去模板的元素与原生的html元素长得一样），当数据变化的时候，dom也随之变化。 1、Vue的开发模式：定义一个扩展名为.vue的文件，其中包含三部分内容，模板、js、样式 复制代码 复制代码 实际的例子： 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 41 42 140 141 复制代码 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 前端的开发围绕着上面的方式进行https://www.cnblogs.com/lichking2017/p/9048557.html