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

初步搭建腳手架

Tips

任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架

我通常使用?cli?生成項目骨架再在之基礎上進行個人修改。

什么是 CLI

命令行界面（英語：command-line interface，縮寫：CLI）是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執行。也有人稱之為字符用戶界面

顧名思義?XXX-CLI?就是使用命令行生成的?XXX?程序。之前寫過一款 基于?nodeJs?制作個性?CLI?的教程

如何用node開發自己的cli工具并發布到NPM?， 想詳細了解制作流程的可以簡單看看。

vue-cli

截止 2018-09-02 vue-cli 最新版本為 3.0

vue?中文生態非常完善，我們直接去官網看看：

https://cli.vuejs.org/zh/

vue-cli2 和 vue-cli3 的對比

很遺憾，vue-cli-3?是?2018-08-11?出來的，而我的論壇早在之前就著手搭建了 cli-3 耽誤了我一些時間，后面也會提到

可以生成 pwa

支持 UI 界面勾勾選選就可以了

兼容 cnpm 了

搞了一套自己的 vue-cli-service 如下：

我這兩天不忙的時候就在考慮項目兼容?vli-3?但是后來廢了很多時間，效果依然不理想，我回滾了代碼宣布放棄了。

鑒于使用?cli-3?并沒有對我的項目有性能上的提升，反而翻遍了我的很多成熟的基礎架構，為時間成本考慮，我決定還是使用 cli-2 進行開發，大體目錄結構都是一樣的。

vue-cli 的安裝

安裝前應注意前提條件，避免浪費不必要的時間。

Vue CLI?需要?Node.js 8.9?或更高版本 (推薦?8.11.0+)。(如果你用的和我一樣 也是?cli-2?那么不需要如此新的?nodeJs?)你可以使用?nvm?或?nvm-windows?在同一臺電腦中管理多個?Node?版本。

不將遠離了，官網比我講的好得多。

可以使用?yarn?或?npm?來安裝

npm?install?-g?@vue/cli#?ORyarn?global?add?@vue/cli

我用 NPM 來重新嘗試一次 (對 npm 速度表示不理想的 可以嘗試淘寶的?CNPM?不要過度依賴cnpm)：

localhost:~?Venda-GM$?sudo?cnpm?i?@vue/cli?-g

npm?中?install?可以寫成 i , -g 放哪都行 ，--save 可以寫成 -S , --save-dev 可以寫成 -D

看到這個畫面，安裝完成了。

測試一下查看一下版本是不是正確，ok 創建項目：

vue?create?new-bee

拉取 2.x 模板 (舊版本)

Vue CLI 3?和舊版使用了相同的?vue?命令，所以?Vue CLI 2?(vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的?vue init?功能，你可以全局安裝一個橋接工具：

npm?install?-g?@vue/cli-init

vue?init?webpack?my-project?#這樣來生成一個?*cli-2*?項目

使用 vue-cli-2 生成項目

vue?init?webpack?new-bee

下面是我創建項目我所選的選項：

稍微講講下面三個：

vue build 的方式

推薦使用 運行時 + 編譯時，通常需要 webpack 編譯 .vue 模板。

是否選擇預先設定的Eslint

并是不每個人都適合的，有的要求過于嚴格，我自己有一套成熟的，代碼在這里?, 就用自己的了，當然可以基于它做一些刪減。

它要幫我們執行 install

如果你有一個好的socket終端代理，可以用這個，否則可以選擇 No 自己用 cnpm 執行

初窺目錄結構

讓我們來看看 vue-cli2 自動生成的項目目錄，我打上標簽，為可能不太理解的同學簡單描述一下

這次我們重構的主要目的是規范、更適合多模塊多人協作、而不是為了讓它看起來更復雜，本文的項目結構、esLint?改良、等都是經過項目小組反復的推敲決定的，有一定的生產價值。

cli?生成的項目?src?下面直接就是源碼，但是為了考慮以后使用?electron?我們再用?renderer?包裹一下，規范一點。

可以參考一下?electron-vue

tips: 上述截圖?github?樹形目錄的插件是?octotree?也可以在谷歌商店直接搜索安裝，看源碼省去不少時間。

先不建立?electron?的?main?文件夾 和?index.ejs?需要添加依賴，目前暫時用不到。

別忘了改一下?webpack?相關的路徑問題

加上?renderer?的路徑

app:?'./renderer/src/main.js'

@ 的路徑也要在?webpack?進行修改，否則會不找組件

需要改下?webpack alias?[別名] 配置

改之后的樣子

alias:?{??????'@':?resolve('renderer/src'), ????}

在 組件目錄(components) 同級建立?容器(container) ：容器里面的各個模塊分離開，這樣可以使項目模塊看起來更加清晰。如果十多人協作的項目又能很好地對工作區劃分，合理的建立路由，避免不必要的沖突。

以目前的論壇項目為例

在 /router?下為?/container/blog?建立?blog.js

const?Blog?=?()?=>?import?(?/*?webpackChunkName:?"blog"?*/?'@/container/blog/index')/* ?所有container/blog目錄下的路徑都配置在此路由children下，避免混亂 ?*/let?routes?=?[{??path:?'/blog',??name:?'blog',??component:?Blog,??children:?[{??????path:?'blogdemo',??????component:?Blog ????}? ??] }]export?{ ??routes }//?注意?/*?webpackChunkName:?"blog"?*/?//是為了后面的路由懶加載，后面會講，不懂沒關系，現在可以忽略

自動生成的?index.js?主路由是這樣的

缺點：

太單一，我們不可能所有的路由都寫在里面作為?children?，看起來非常混亂，開發調試很難處理，多人協作還很容易引起沖突。

我們嘗試將?blog.js?引過來

先將?blog.js?export?的路由引過來，起一個別名防止沖突

import?{?routes?as?blogRoutes?}?from?'./blog'

因為可能有N多個路由模塊，我們將?routes?拆分

自動生成的是這樣簡單的：

//直接導出路由export?default?new?Router({??routes:?[ ????{??????path:?'/',??????name:?'HelloWorld',??????component:?HelloWorld ????} ??] })

我們拆分成這樣：

//定義基礎路由let?route?=?[ ??{????path:?'/',????name:?'HelloWorld',????component:?HelloWorld ??} ]//以此類推可以方便的鏈接更多路由route?=?route.concat(blogRoutes)//導出export?default?new?Router({??routes:?route,??linkActiveClass:?'active'})

回過頭來，我們為 blog/index.vue 添加一些內容，測試一下：

測試一下

首先

npm?install

嫌慢可以使用淘寶的 cnpm 我以前的文章講過

npm?run?dev

按照提示在瀏覽器輸入：http://localhost:8080/#/blog

vue-cli2 webpack?生成的項目是支持熱部署的，所以很多配置不需要自己從零開始配置，這也是我希望大家使用?CLI?的原因，省去了一些時間。其他 login 等一些模塊 按照這個模式寫就可以了。

談談?eslint

個人覺得?esLint?不論是在個人項目還是團隊協作中，都是有價值的，它可以讓自己、團隊的代碼風格標準化。現在esLint 甚至可以預測你的代碼是否可能會有問題。建議可以制定一些規則，開發時通過你的 IDE(集成環境) ： idea 、WebStorm、 vscode、 之類的插件配合檢測，eslint?打包檢測編譯不通過的那種非常嚴格的初期還是不要嘗試了。

我當時參考?airbnb?調整的配置，經過一年多的項目實戰逐漸調整，目前還算比較合理，esLint配置規則代碼在這里。

本章代碼在這里

你甚至可以再?commit?里看到本章循序漸進的改造過程

項目構建總結

項目構建暫時就講到這里了，我們依靠?cli-2?生成了一個基本的骨架，但并不依賴?cli-2?,我們對骨架進行了一些擴展，至于具體的?webpack?的優化，axios?的優化、攔截、node?做開發模式代理層 等等，我覺得隨著項目進行來講更好，我不應該一味的灌一堆知識，希望大家能堅持跟我消化。

關于我

目前在寫《從零構建前后分離項目》系列，修正和補充以此為準

不斷更新的?《從零構建前后分離項目》實踐地址

往期文章

《從零構建前后分離 WEB 項目》 序 - 開源的意義

《從零構建前后分離web項目》：開篇 - 縱觀WEB歷史演變

《從零構建前后分離web項目》探究 - 深入聊聊前后分離架構

《從零構建前后分離web項目》準備 - 前端了解過關了嗎？前端基礎架構和技術介紹

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

本文轉載自異步社區。

原文鏈接：

https://www.epubit.com/articleDetails?id=N4446f6f0-fb36-4b17-9d8e-de13eaeb82ce

Web應用防火墻 WAF

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。