摘要:寫在前面其實(shí)最開始不是特意來研究的源碼,只是想了解下的命令,如果想要了解命令的話,那么繞不開寫的。通過分析發(fā)現(xiàn)與相比,變化太大了,通過引入插件系統(tǒng),可以讓開發(fā)者利用其暴露的對(duì)項(xiàng)目進(jìn)行擴(kuò)展。
寫在前面
其實(shí)最開始不是特意來研究 vue-cli 的源碼,只是想了解下 node 的命令,如果想要了解 node 命令的話,那么繞不開 tj 寫的 commander.js。在學(xué)習(xí) commander.js 過程中發(fā)現(xiàn) vue-cli 的交互方式挺炫酷的,然后就去看了下源碼,所以就有了這篇文章。
鏈接vue-cli 3.0 源碼分析
目錄 @vue/cli
前言
介紹
開始
環(huán)境介紹
常見 npm 包
vue create
create 入口
整體分析
基礎(chǔ)驗(yàn)證
獲取預(yù)設(shè)選項(xiàng)(preset)
依賴安裝(installDeps)
Generator
結(jié)尾分析
總結(jié)
vue add
add 入口
安裝插件
調(diào)用插件
總結(jié)
vue invoke
invoke 命令
vue inspect
inspect 命令
vue serve
serve 命令
vue build
build 命令
vue ui
ui 入口
整體分析
server 端
client 端
總結(jié)
vue init
init 入口
@vue/cli-init 分析
vue-cli 2.x init 分析
generate 函數(shù)分析
總結(jié)
vue config
config 命令
vue upgrade
upgrade 命令
vue info
info 命令
@vue/cli-service
整體介紹
入口
new Service()
service.run()
內(nèi)置插件
serve
build
inspect
help
總結(jié)vue-cli-analysis 整個(gè)項(xiàng)目可大致分為兩個(gè)部分,一部分是 vue 命令分析,包含 create,add,invoke, ui 等等,另一部分就是 vue-cli-service 的分析。通過分析發(fā)現(xiàn)與 2.X 相比,3.0 變化太大了,通過引入插件系統(tǒng),可以讓開發(fā)者利用其暴露的 API 對(duì)項(xiàng)目進(jìn)行擴(kuò)展。在分析之前對(duì)插件機(jī)制不是很了解,不知道如何實(shí)現(xiàn)的,分析之后逐漸了解了其實(shí)現(xiàn)機(jī)制,而且對(duì)于 vue 項(xiàng)目的配置也更加熟悉了。除此之外,在分析過程過程中還了解了很多有意思的 npm 包,比如 execa, debug, lowdb,lodash,inquirer 等等,最后,如果你想學(xué)習(xí) node 命令或者想寫一些比較有意思的命令行工具的話,閱讀 vue-cli 源碼是一個(gè)不錯(cuò)的選擇。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/101652.html
上一篇已經(jīng)講了create命令;那么這一篇我們來看一下add和invoke這個(gè)命令。之所以放一起講,是因?yàn)楫?dāng)add執(zhí)行的時(shí)候,也會(huì)去執(zhí)行invoke add vue add vue-cli-plugin-xxx 或 vue add @vue/xxx 通過這種形式就是vue-cli3.0內(nèi)部能識(shí)別的插件了首先來看一下入口 program .command(add [pluginOptions]...
摘要:本文主要學(xué)習(xí)的源碼的記錄。這里有一個(gè)的示例的數(shù)據(jù)會(huì)被插件生成器用來生成相應(yīng)的項(xiàng)目文件。另一個(gè)遠(yuǎn)程版本另外而是通過包獲取的版本。 本文主要學(xué)習(xí)vue-cli3.0的源碼的記錄。源碼地址: https://github.com/vuejs/vue-cli 主要對(duì)packages里面的@vue進(jìn)行學(xué)習(xí)。如下圖 showImg(https://segmentfault.com/img/...
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
閱讀 2620·2021-11-17 17:00
閱讀 1873·2021-10-11 10:57
閱讀 3741·2021-09-09 11:33
閱讀 914·2021-09-09 09:33
閱讀 3554·2019-08-30 14:20
閱讀 3317·2019-08-29 11:25
閱讀 2801·2019-08-26 13:48
閱讀 742·2019-08-26 11:52