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

時間 2019-11-17

標籤從零構建先後分離的web項目實戰 5分快速構建規範 vue 項目骨架欄目 HTML 简体版

原文原文鏈接

初步搭建腳手架

Tips

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

我一般使用 cli 生成項目骨架再在之基礎上進行我的修改。html

什麼是 CLI

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

顧名思義 XXX-CLI 就是使用命令行生成的 XXX 程序。以前寫過一款基於 nodeJs 製做個性 CLI 的教程vue

如何用node開發本身的cli工具併發布到NPM ，想詳細瞭解製做流程的能夠簡單看看。java

vue-cli

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

vue 中文生態很是完善，咱們直接去官網看看：webpack

cli.vuejs.org/zh/ios

vue-cli2 和 vue-cli3 的對比

很遺憾，vue-cli-3 是 2018-08-11 出來的，而個人論壇早在以前就着手搭建了 cli-3 耽誤了我一些時間，後面也會提到git

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

能夠生成 pwa
支持 UI 界面勾勾選選就能夠了
兼容 cnpm 了
搞了一套本身的 vue-cli-service 以下：

我這兩天不忙的時候就在考慮項目兼容 vli-3 可是後來廢了不少時間，效果依然不理想，我回滾了代碼宣佈放棄了。github

鑑於使用 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 添加一些內容，測試一下：

<template>
  <div class="Blog">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script> export default { name: "Blog", data() { return { msg: "Welcome to Your Blog Page" }; } }; </script>
複製代碼

測試一下

首先

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 作開發模式代理層等等，我以爲隨着項目進行來說更好，我不該該一味的灌一堆知識，但願你們能堅持跟我消化。