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

kel 發布于2019-08-19 11:10 / 1515人閱讀

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。

初步搭建腳手架

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 耽誤了我一些時間，后面也會提到

簡單看看了看 vue-cli3 的新特性：

可以生成 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
# OR
yarn global add @vue/cli

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

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

TIPS

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 的運行效果將會跟 vue-cli@2.x 相同

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 改良、等都是經過項目小組反復的推敲決定的，有一定的生產價值。

杞人憂天：為 electron 做好準備

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

可以參考一下 electron-vue

兼容Electron的源碼目錄

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分鐘快速構建規范的前端項目骨架

云服務器 GPU云服務器前后端分離前后端分離開發 js前后端分離框架前后端不分離 jsp

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

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

Yii2框架實戰

開始使用composer安裝 showImg(https://segmentfault.com/img/bVzUjQ); 歸檔文件安裝官網：http://www.yiiframework.com/d... showImg(https://segmentfault.com/img/bVzUwd); 配置apache vhost 文件 DocumentRoot d:/wamp/www...

wuyangchun 2019-06-27 14:10 評論0 收藏0
Java窗口（JFrame）從零開始（7）——下拉列表+列表框

摘要：下拉列表列表框身份證軍人證殘疾證護照身份證軍人證殘疾證護照定義字符串實例化下拉列表實例化列表框實例化面板設置大小實例化面板設置關閉方式，可以選擇多種關閉玄子選項下拉列表（JComboBox）列表框（JList） package jframe; import java.awt.BorderLayout; import java.awt.Container; import java.aw...

wing324 2019-08-16 10:33 評論0 收藏0
Java窗口（JFrame）從零開始（6）——單選按鈕+復選框

單選按鈕+復選框單選按鈕、復選框是什么這個都知道，不做解釋。上代碼（自己寫著玩的，排班不太好）package jframe;import java.awt.BorderLayout;import java.awt.Container;import java.awt.FlowLayout;import java.awt.event.ActionEvent;import java.awt.event...

youkede 2019-08-16 10:33 評論0 收藏0
iKcamp&掘金Podcast直播回顧（12月2號和9號的兩場）

摘要：月號哈志輝前端工程化滬江實踐哈志輝滬江前端架構師，移動前端高效開發實戰作者之一在線地址月號陳達孚實現漸進式應用陳達孚香港中文大學計算機碩士，移動前端高效開發實戰作者之一，前端開發者指南譯者之一，中國前端開發者大會中生代技術大會榮譽講師，滬江 12月2號－哈志輝－前端工程化滬江CCtalk實踐哈志輝：滬江CCtalk前端架構師，《移動Web前端高效開發實戰》作者之一在線地址：htt...

everfly 2019-08-22 11:14 評論0 收藏0
Pyhton--Redis實戰：Mac brew安裝redis

摘要：下一篇文章實戰第一章第一節簡介安裝下載失敗不過不需要擔心，會已經從其它地方下載并正確安裝了配置文件路徑啟動可選添加至開機啟動項可選下一篇文章實戰第一章第一節簡介下一篇文章：Python--Redis實戰：第一章第一節：Redis簡介 1、安裝redis $ brew install redis showImg(https://segmentfault.com/img/remote/...

Towers 2019-07-30 17:54 評論0 收藏0