详解vue组件开发脚手架

generator-vue-component可以快速生成自己的组件开发的脚手架，类似于vue-cli生成vue项目，这脚手架是目录结构是方便组件开发和调试

由于脚手架是由yeoman搭建，所以必须全局安装yeoman

npm install yo

然后全局安装generator-vue-component

npm install generator-vue-component -g

到项目目录，获取对应的开发模板

yo vue-component-developer

运行上面命令会弹出下面，依次输入对应的信息，到Your component type这一步可以选择对应的组件类型，有组件和指令两种模板，选择完成后输入对应的组件名称或者指令名称即可，例如我们声明的组件名为vue-table

在vueTable目录下安装对应的模块，后运行下面命令即可

npm i && npm run dev

目录结构

index.js

此文件是vue组件声明并导出

import VueTable from './src/components/VueTable.vue';

VueTable.install = function (Vue) {
 Vue.component(VueTable.name, VueTable)
};
export default VueTable;

components/VueTable.vue

开发的组件文件

<style lang="scss" scoped>

</style>
<template>
 <div>
 <h1>{{ title }}</h1>
 <button @click="handleClick">click</button>
 </div>
</template>
<script>
 export default {
 name: "vue-table",
 data() {
  return {
  title: "vue-table"
  };
 },
 methods: {
  handleClick: function () {
  alert("vue-table");
  }
 },
 mounted() {

 }
 };
</script>

App.vue

App.vue是用来测试组件的使用

<template>
 <div id="app">
 <vue-table></vue-table>
 </div>
</template>

<script>
 export default {
 name: 'app',
 data() {
  return {}
 }
 }
</script>

<style lang="scss">

</style>

主要用来编写代码的文件有components/VueTable.vue和demo/App.vue，一个用来开发，一个用来测试，其他不需要管

开发完怎么办？

开发完成可以有两个选择

本地安装 npm install 项目的本地路径

发布到npm，远程安装 npm install vue-table

如何使用？

import VueTable from 'vue-table'
Vue.use(VueTable);

github地址

最后附上github地址，给个star吧！https://github.com/KELEN/generator-vue-component-developer

赞 (0)

相关推荐

  • 用vue快速开发app的脚手架工具

    前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本文最大特点: webpack4 多页面 跨域Proxy代理 VConsole移动端调试,手机上的开发者工具 es6/es7 babel 转换 项目地址 GitHub 使用手册 MogoH5+ 是一个 vue 多页面 脚手架工具 ,结合 H5+可以快速开发安卓与苹果 APP. 即使不适用 Hbuild

  • vue脚手架及vue-router基本使用

    首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具,对于刚接触的新手们建议关闭,不然代码写的不符合它的规范你的编译器会一直报错,如下图 安装好脚手架之后就像这样 终端输入npm run dev,然后打开localhost:8080就可以看到项目运行啦 大致分析一下几个比较常用的文件把,如下图 1.bu

  • vue-cli脚手架引入图片的几种方法总结

    我个人常用的方法,一直在摸索更好的方法,如果各位大佬有什么建议,可以给我评论留言哦 1.import方法 第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在data对象中定义一个属性edits,值对应edit 第三步:在template中 给标签绑定属性 最后刷新界面看效果就可以了! 2.static方法 第一步:图片放在static文件夹,在data对象的一个里定义属性pro_img,属性值是图片与.vue的相对路径 第二步

  • vue-cli脚手架config目录下index.js配置文件的方法

    此文章介绍vue-cli脚手架config目录下index.js配置文件 1.此配置文件是用来定义开发环境和生产环境中所需要的参数 2.关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块,用来处理路径统一的问题 var path = require('path')

  • vue脚手架中配置Sass的方法

    世界上最成熟.最稳定.最强大的专业级CSS扩展语言! 兼容CSS Sass完全兼容所有版本的CSS.我们对此严格把控,所以你可以无缝地使用任何可用的CSS库. 特性丰富 Sass拥有比其他任何CSS扩展语言更多的功能和特性.Sass核心团队不懈努力,一直使其保持领先地位. 成熟 Sass已经经过其核心团队超过8年的精心打造. 行业认可 一次又一次地,行业把Sass作为首选CSS扩展语言. 社区庞大 数家科技企业和成百上千名开发者为Sass提供支持. 框架 有无数的框架使用Sass构建.比如Com

  • vue脚手架搭建过程图解

    vue脚手架是个好东西,能够快速搭建vue单页面应用,vue是基于node环境的,所以要先安装node,去官网下载安装就可以. 进入某个文件夹的命令为: 查看node版本: 搭建步骤为: 出现下图说明搭建成功: 按照提示输入: 如果出现下图说明运行成功: 在浏览器中按照指示输入: 运行结果为: ok,至此vue脚手架就搭建完成了! 总结 以上所述是小编给大家介绍的vue脚手架搭建过程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 全新打包工具parcel零配置vue开发脚手架

    parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/parcel-vue 初始化项目 $ git clone https://github.com/w3c-king/parcel-vue.git 安装依赖 $ cd parce-vue $ npm install 其中 parcel-bundler 是主要的工具,对于 vue 结尾的单文件,需要单独处理文件类型,

  • 详解使用vue-cli脚手架初始化Vue项目下的项目结构

    vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 安装 下面来安装

  • vue-cli脚手架-bulid下的配置文件

    本文章适合初学者学习,如有错请提出.近期对vue比较感兴趣,所以准备用vue写一个blog.早期先对vue脚手架了解一下,对于新手官网建议先不用vue-cli,但我觉得如果没有任何的依据凭自己写一个项目(包括webpack的配置等)这无疑是浪费时间的而且都最后还是是而非的.所以我觉得完全可以用脚手架建一个webpack项目,然后我们可以具体对应它生成的文件学习(当然这只是我的学习方法,我认为这样比较好学,但不一定人人都是这样的). 在学习的过程中发现网上许多的简介都已经过期(vue发展的过快了吧

  • 详解vue组件开发脚手架

    generator-vue-component可以快速生成自己的组件开发的脚手架,类似于vue-cli生成vue项目,这脚手架是目录结构是方便组件开发和调试 由于脚手架是由yeoman搭建,所以必须全局安装yeoman npm install yo 然后全局安装generator-vue-component npm install generator-vue-component -g 到项目目录,获取对应的开发模板 yo vue-component-developer 运行上面命令会弹出下面,依

  • 详解vue 组件的实现原理

    组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性.本文我们一起从源码的角度,了解一下组件的底层实现原理. 组件注册时做了什么? 在Vue中使用组件,要做的第一步就是注册.Vue提供了全局注册和局部注册两种方式. 全局注册方式如下: Vue.component('my-component-name', { /* ... */ }) 局部注册方式如下: var ComponentA = { /* ... */ } new Vu

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • 详解Vue组件复用和扩展之道

    概述 软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳方法是什么? Vue 提供了不少 API 和模式来支持组件复用和扩展,你可以根据自己的目的和偏好来选择. 本文介绍几种比较常见的方法和模式,希望对你有所帮助. 扩展组件是否必要 要知道,所有的组件扩展方法都会增加复杂性和额外代码,有时候还会增加性能消耗. 因此,在决定扩展组件之前,最好先看看有

  • 详解vue 组件

    Vue的两大核心 1. 数据驱动 - 数据驱动界面显示 2. 模块化 - 复用公共模块,组件实现模块化提供基础 组件基础 组件渲染过程 template ---> ast(抽象语法树) ---> render ---> VDom(虚拟DOM) ---> 真实的Dom ---> 页面 Vue组件需要编译,编译过程可能发生在 打包过程 (使用vue文件编写) 运行时(将字符串赋值template字段,挂载到一个元素上并以其 DOM 内部的 HTML 作为模板) 对应的两种方式 r

  • 详解vue 组件注册

    一.了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false let Hello = { name: 'hello', template: '这是全局组件hello' } Vue.component('hello', Hello) new Vue({ el: '#ap

  • 详解vue组件基础

    什么是组件 组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的

  • 详解vue组件之间的通信

    说明:下面我总结了比较常用的vue组件之前通信的方式,最近准备面试,所以有些总结贴上来分享 props和$emit 只有父子关系才可以用这种方式,父组件向子组件传递参数用props,子向父传递使用触发$emit自定义事件 1.props <!-- parent.vue, 可以传递`静态`的props和`动态`的props, 静态的参数只能是个String类型的,如果是其他类型的一定要记得加`:`来表示这是一个 js 表达式而不是一个字符串 --> <Child :name="n

  • 详解Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的"<p>父组件如果没有插入内容,我将被显示</p>"这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot&

  • 详解Vue组件之间通信的七种方式

    使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"

随机推荐