詳解vue組件開發(fā)腳手架

更新時(shí)間：2018年06月15日 08:15:02 投稿：laozhang

本篇文章給大家詳細(xì)分析了vue組件開發(fā)腳手架的相關(guān)內(nèi)容以及知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以學(xué)習(xí)參考下。

generator-vue-component可以快速生成自己的組件開發(fā)的腳手架，類似于vue-cli生成vue項(xiàng)目，這腳手架是目錄結(jié)構(gòu)是方便組件開發(fā)和調(diào)試

由于腳手架是由yeoman搭建，所以必須全局安裝yeoman

npm install yo

然后全局安裝generator-vue-component

npm install generator-vue-component -g

到項(xiàng)目目錄，獲取對(duì)應(yīng)的開發(fā)模板

yo vue-component-developer

運(yùn)行上面命令會(huì)彈出下面，依次輸入對(duì)應(yīng)的信息，到Y(jié)our component type這一步可以選擇對(duì)應(yīng)的組件類型，有組件和指令兩種模板，選擇完成后輸入對(duì)應(yīng)的組件名稱或者指令名稱即可，例如我們聲明的組件名為vue-table

在vueTable目錄下安裝對(duì)應(yīng)的模塊，后運(yùn)行下面命令即可

npm i && npm run dev

目錄結(jié)構(gòu)

index.js

此文件是vue組件聲明并導(dǎo)出

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

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

components/VueTable.vue

開發(fā)的組件文件

<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是用來(lái)測(cè)試組件的使用

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

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

<style lang="scss">

</style>

主要用來(lái)編寫代碼的文件有components/VueTable.vue和demo/App.vue，一個(gè)用來(lái)開發(fā)，一個(gè)用來(lái)測(cè)試，其他不需要管

開發(fā)完怎么辦？

開發(fā)完成可以有兩個(gè)選擇

本地安裝 npm install 項(xiàng)目的本地路徑

發(fā)布到npm，遠(yuǎn)程安裝 npm install vue-table

如何使用？

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

github地址

最后附上github地址，給個(gè)star吧！https://github.com/KELEN/generator-vue-component-developer

您可能感興趣的文章:

相關(guān)文章

element的表單元素使用總結(jié)
表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價(jià)值，感興趣的可以了解一下
2021-06-06
element-ui使用el-date-picker日期組件常見場(chǎng)景分析
最近一直在使用 element-ui中的日期組件,所以想對(duì)日期組件常用的做一個(gè)簡(jiǎn)單的總結(jié),對(duì)element-ui el-date-picker日期組件使用場(chǎng)景分析感興趣的朋友一起看看吧
2024-05-05
vue 使用 v-model 雙向綁定父子組件的值遇見的問(wèn)題及解決方案
這篇文章主要介紹了vue 使用 v-model 雙向綁定父子組件的值遇見的問(wèn)題及解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
Vue3基于husky的代碼檢查工作流
husky是一個(gè)git hooks工具（git的鉤子工具，可以在特定時(shí)機(jī)執(zhí)行特定的命令），這篇文章主要介紹了Vue3-基于husky的代碼檢查工作流,需要的朋友可以參考下
2023-11-11
vue3?邏輯復(fù)用的實(shí)現(xiàn)示例
在項(xiàng)目開發(fā)中,有兩個(gè)功能特別類似,如果單獨(dú)實(shí)現(xiàn),會(huì)有很多重復(fù)的代碼，這時(shí)候就會(huì)用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下
2024-02-02
Vuex中mutations與actions的區(qū)別詳解
下面小編就為大家分享一篇Vuex中mutations與actions的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
八個(gè)Vue中常用的v指令詳解
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個(gè)Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下
2022-04-04
vue轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue輪詢請(qǐng)求解決方案的完整實(shí)例
項(xiàng)目開發(fā)中需要做一個(gè)輪詢,所以將實(shí)現(xiàn)的過(guò)程記錄了一下,下面這篇文章主要給大家介紹了關(guān)于vue輪詢解決方案的相關(guān)資料,需要的朋友可以參考下
2021-07-07
vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決
這篇文章主要介紹了vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04