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

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

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

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

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

npm install yo

然后全局安裝generator-vue-component

npm install generator-vue-component -g

到項目目錄，獲取對應的開發(fā)模板

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

開發(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是用來測試組件的使用

<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，一個用來開發(fā)，一個用來測試，其他不需要管

開發(fā)完怎么辦？

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

本地安裝 npm install 項目的本地路徑

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

如何使用？

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

github地址

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

您可能感興趣的文章:

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