為什么我不推薦你使用vue-cli創建腳手架？

trigkit4 發布于2019-08-22 16:09 / 1912人閱讀

摘要：后來經過排查你會發現是由于目前還沒有版本。可以使用該方式解決。這就是我為什么不推薦你使用創建腳手架的原因此文的受眾是想要進階中級的初級前端人員。

最近在知乎看到一個問題，原問題如下：

“ 很奇怪，為什么現在能找到自己手動創建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現在一般的做法就是直接從vue-cli開始然后改成自己需要的模樣嗎？難道就沒有人從零開始搭建一個漸進增強的腳手架？這一點我很疑惑，希望大牛給點指導。”

這個問題我之前在公司也曾想過，當初入門vue項目也是從一個 npm install vue-cli -g 的命令行開始的，覺得官方提供的vue-cli腳手架很友好，不用想vue+webpack的工作流怎么搭建，vue-loader 和 css-module怎么配置，如何安裝使用eslint和editorconfig等，就可以直接進入業務代碼的開發階段。

當然，以上是對于寫業務代碼的前端一線編碼人員來說的，對于追求上進的你當然不滿足于一直寫業務代碼，你也想知道一個項目在破土動工前，前端leader是怎么搭建一個前端項目的工作流的，如何去手動配置一個具體項目的webpack打包文件，包括后期的SSR，服務端渲染。

這些都是你提升自己內功的砝碼，也是初級前端和中級前端的區別所在，初級前端只會在leader安排下的一個模塊里寫點業務代碼而不用去管前端工程的問題，這些問題都被前端leader搞定了，你只需調用他寫好的命令或者插件即可。

中級前端或者更進階者就有統籌全局的能力，類似于文章開頭說的，能手動創建一個和公司項目需求深度定制的vue腳手架，而不再依賴于官方提供的vue-cli，一方面自己定制的腳手架哪出了問題自己心里清楚，從而也能培養自己前端架構的能力，另一方面這也是月薪10K與20K的技術差距。

當然，如果你直接使用了vue-cli，你的領導要求你將webpack的版本從3升級到最新的大版本4，你會不會一臉懵逼呢？舉個例子：
在webpack4.0中，如何使用extract-text-webpack-plugin配置css多帶帶分離打包，以及如何解決在升級過程中碰到的一些坑？如果你沒有親手升級過webpack4，你根本不會發現這些問題，例如extract-text-webpack-plugin的報錯：

(node:12712) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    E:***myprojectwebpack-vue-elementUi
ode_moduleswebpacklibChunk.js:460
                    throw new Error(
                    ^
    
    Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
        at Chunk.get (E:***myprojectwebpack-vue-elementUi
ode_moduleswebpacklibChunk.js:460:9)
        at E:***myprojectwebpack-vue-elementUi
ode_modulesextract-text-webpack-plugindistindex.js:176:48
        at Array.forEach ()
        at E:***myprojectwebpack-vue-elementUi
ode_modulesextract-text-webpack-plugindistindex.js:171:18

這個問題的解決方式你在百度上暫時還搜不到答案，只能是依靠平時閱讀官方文檔、技術社區等尋找解決之道。
后來經過排查你會發現是由于extract-text-webpack-plugin目前還沒有webpack4版本。可以使用該方式npm install extract-text-webpack-plugin@next解決。

這就是硬實力的一種體現，在公司里技術的高低，體現于公司項目中碰到的難以解決的bug的解決能力。你可以看看平時在公司里誰解決的bug多，一般不是太難的bug都是前端小組的成員去解決，比較難的bug大多數情況下是前端小組的leader去解決的。

這種硬實力的體現，折射出他為何是leader，你為何是被管理者，同樣的崗位，放你上去，你不一定能解決掉項目中碰到的問題，而他能。所以，童鞋們，人家之所以是leader，是因為人家有高你一籌的技能，而這恰恰是你現階段所缺少的。

俗話說，不想當leader的程序猿不是好碼農。所以，平時你們可以在公司里看看你們的leader在忙些什么。

這就是我為什么不推薦你使用vue-cli創建腳手架的原因（此文的受眾是想要進階中級的初級前端人員）。

接下來，我會分章節手把手教大家如何從零開始一個vue+webpack前端工程工作流的搭建，以及SSR服務端渲染。文章預告如下：

一個正式項目的目錄結構是怎么形成的

vue-loader是如何配置的

淺談css-module配置

安裝使用eslint檢查的小技巧

如何在前端項目中配置editorconfig以及precommit

......

怎么用createRenderer的方式進行服務端渲染

正式環境打包以及異步模塊打包優化

以上內容均會第一時間發布在我的公眾號：閏土大叔，歡迎關注。

云服務器 GPU云服務器腳手架使用你可能沒有權限使用網絡資源大數據數據很多你要什么租用云服務器你會選擇什么配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94099.html

《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

qieangel2013 2019-08-23 11:58 評論0 收藏0
《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

kel 2019-08-19 11:10 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
Vuejs自己的構建工具

摘要：然而，這些模板并不限制你自己對于使用的架構組織和選擇類庫。目前可用的模板包括全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。最近，尤大在和人對噴的時候，悄然放出了一個大招，于是為了追趕他的步伐，趕緊試驗了下，并且把原文給大家翻譯下。原文地址：Announcing vue-cli 譯文源地址： Vuejs自己的構建工具先上原文翻譯：最近有很多大量關于Reac...

leoperfect 2019-08-19 17:20 評論0 收藏0
深入認識vue-cli：能做的不僅僅是初始化vue工程

摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個工程，完全不需要擔心繁復的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運行的模板，就能夠通過進行工程的初始化。相信對于大部分使用過VueJS的同學來說，vue-cli是他們非常熟悉的一個工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個vue工程，完全不需要...

AlienZHOU 2019-08-21 17:09 評論0 收藏0