前言

創(chuàng)新互聯(lián)專注于綿竹企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計,成都做商城網(wǎng)站。綿竹網(wǎng)站建設(shè)公司,為綿竹等地區(qū)提供建站服務(wù)。全流程按需設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

前端日常開發(fā)中，會遇見各種各樣的 cli，使用 vue 技術(shù)棧的你一定用過 @vue/cli ,同樣使用 react 技術(shù)棧的人也一定知道 create-react-app 。利用這些工具能夠?qū)崿F(xiàn)一行命令生成我們想要的代碼模版，極大地方便了我們的日常開發(fā)，讓計算機(jī)自己去干繁瑣的工作，而我們，就可以節(jié)省出大量的時間用于學(xué)習(xí)、交流、開發(fā)。

cli 工具的作用在于它能夠?qū)⑽覀冮_發(fā)過程中經(jīng)常需要重復(fù)做的事情利用一行代碼來解決，比如我們在寫需求的時候每新增一個頁面就需要相應(yīng)的增加該頁面的初始化代碼，而相同文件類型的初始化代碼往往是一樣的，比如 example.vue。同時我們還需要增加對應(yīng)的路由，比如在 router.js 中增加對應(yīng)的路由規(guī)則。這些工作都是很繁瑣又重復(fù)的，每次遇到這種情況都重復(fù)一遍嗎？是時候作出改變了，編寫自己的 cli 工具，一行命令，3 秒鐘進(jìn)入 coding 狀態(tài)！

本文以自己的 fc-vue-cli 為例，將開發(fā)到發(fā)布過程完整記錄下來，看完本文，你將學(xué)會如何從零開發(fā)一個 cli 項目，以及如何使用 npm 發(fā)布自己的包。

提前放上該項目地址

源代碼地址： 源代碼

npm 地址： npm

原文地址（github上）：

github

要實(shí)現(xiàn)的功能

fc-vue add-page
通過這行命令來新增一個頁面的模版文件，省去了手動新建文件，手動復(fù)制初始化代碼的麻煩，同時添加上對應(yīng)的路由配置

腳手架的名字定為 fc-vue,這個是通過 package.json 里面的 name 字段來定義的。

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

 

入口 (bin/index.js)

入口文件只做了一件事，那就是判斷當(dāng)前node的版本是否大于10，如果版本號<10則提醒用戶升級node

#!/usr/bin/env node

// 'use strict';
const chalk = require('chalk');

const currentNodeVersion = process.versions.node;
const major = currentNodeVersion.split('.')[0];
if (major < 10) {
 console.error(
 chalk.red(
  `You are running Node \n${currentNodeVersion} \nvue-assist-cli requires Node 10 or higher.\nPlease update your version of Node`
 )
 );
 process.exit(1);
}

require('../packages/init');

分享名稱：手把手帶你搭建一個nodecli的方法示例-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.chinadenli.net/article40/dhsiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站設(shè)計、微信小程序、關(guān)鍵詞優(yōu)化、域名注冊、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)