Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想用vuejs写个单页面应用出来.兜兜转转地开始使用vue-router这个插件,阅读了vue-router前两个事例之后,发现了一个问题. 通过webpack导入.vue的组件文件的时候,弹出问题: [vue warn]: Failed to mount component:template or…

注册全局组件有啥好处呢? 提高代码的复用性:哪里需要写哪里,贼方便,就写一个标签:减少代码量:可以再配合slot一起使用,咦~~,舒服 为了让整个项目的可读性,我创建一个文件统一存放全局组件 1.创建common文件夹,文件夹用来存放我们所需要的注册的全局组件 此时我们需要一个index.js文件.上代码 [脑补]我已经再common文件夹下创建好了我引入的这两个文件 这里值得注意的是tabs.name 和 tabItems.name 是啥玩意呀! 诶呀  就是组件命名呗   嗯?需要注意吗?…

1  全局注册组件 建一个 js 文件, 注册全局组件, 并且暴露出去 然后再在 main.js  中引入       在页面就可以直接使用了    2 全局注册过滤器 建立文件, 包含所有过滤器方法, export 出去   在 main.js 中引入, 并注册全局过滤器 在页面中直接使用  3 定义全局方法 建一个文件注册全局方法 使用 exports 可能会报错,应该将 .babelrc 文件中的 "modules": false 去掉  modules组止了文件的转换 在 ma…

vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context( // 其组件目录的相对路径(组件目录相对于当前js文件的路径) '../components', // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式(因此要注册为全局组件的组件名称约定很重要) /Base[A-Z]\w+\.(vue)$/ ) requireCompone…

做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import vueWaterfallEasy from '你的路径/组件名.vue' 方式二:通过npm全局安装:cnpm install vue-waterfall-easy --save-dev import vueWaterfallEasy from 'vue-waterfall-easy' 报错注意: C…

全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users', data () { return { msg: '用户名' } } } </script> <!-- Add "scope…

vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 npm install vee-validate@next --save 注意:@next,不然是Vue1.0版本 bower install vee-validate#2.0.0-beta.13 --save 二.引用 import Vue from 'vue'; import VeeValidat…

组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在:  必须有根元素,包裹住所有的代码 例如: <script> var Home={ template:'#aaa' }; window.onload=function(){  new Vue({  el:'#box', data:{ msg:'welcome vue2.0' },…

组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用transition完成任何元素进入/离开的过渡组件需要满足下列条件 条件渲染(v-if) 条件展示(v-show) 动态组件 组件根节点 Elample <div id="demo"> <button v-on:click="show = !show"…

element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要单独引入. 如果报错,在 webpack.conf…