天天看點
傳回

基于vue的仿餓了麼webapp1、項目介紹2、技術選型3、項目結構分析4、準備工作

1、項目介紹

  • 此項目為外賣App核心的商家子產品的SPA
    • SPA是為建構WebApp設計的路由控制和視圖轉換架構
  • 包括商品、評論、商家介紹、購物車等多個子子產品
  • 使用 Vuejs全家桶 + ES6 + Webpack 等前端熱門的技術
  • 采用 子產品化、元件化、工程化 的模式開發
  • 子產品與元件
    • 子產品
      • JS子產品
      • 具有特定功能的JS檔案
    • 元件
      • 功能元件/子產品
      • 是實作界面某個局部功能的所有資源的集合(html/css/js/image等)
    • 聯系
      • 一個元件中一般會使用到多個JS子產品
  • 子產品化 / 元件化 / 工程化
    • 這3個概念就是用來描述項目(應用)的
    • 子產品化: 項目所有的JS都是一個子產品, 一個子產品編寫的
    • 元件化: 項目的界面功能是以元件形式編寫組合而成的
    • 工程化: 通過項目建構工程實作了項目的自動建構/打包處理

2、技術選型

  • 元件化（資料 / 互動）
    • vue
    • vue-cli
    • vue-router
    • axios
    • vuex
  • 背景處理（mock資料）
    • mockjs
    • express（Node.Js架構）
  • 子產品化
    • ES6
    • babel
  • 工程化（項目建構 / 規範化）
    • vue-cli
    • webpack
  • 編碼規範檢查
    • eslint
  • css預編譯器
    • stylus
  • 滑動庫
    • better-scroll

2.1 Vue 架構

關于Vue的更多筆記，詳見去年的筆記：Vue快速入門學習筆記(更新ing)

  • Vue

     (讀音

    /vju/

     , 類似于view)是一套用于建構使用者界面的漸進式架構，釋出于2014年2月。
  • 與其它大型架構不同的是，Vue被設計為可以自底向上逐層應用。
  • Vue的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫(如:

    vue-router

     : 跳轉，

    vue-resource

     : 通信，

    vuex

     :管理)或既有項目整合。

2.1 Vue CLI 腳手架

🛠️ Vue.js 開發的标準工具

什麼是vue-cli

  • 官方提供的一個腳手架工具，用于

    快速生成一個 vue 的項目模闆

     。
預先定義好的目錄結構及基礎代碼，就好比咱們在建立 Maven 項目時可以選擇建立一個骨架項目，這個骨架項目就是腳手架，我們的開發更加的快速。

主要功能特點

  • 統一的目錄結構
  • 本地調試
  • 熱部署
  • 單元測試
  • 內建打包上線
  • 功能豐富
  • 易于擴充
  • 無需 Eject
關于Vue CLI的更多筆記，詳見去年的筆記：Vue快速入門學習筆記(更新ing)

2.3 Webpack 打包工具

基于vue的仿餓了麼webapp1、項目介紹2、技術選型3、項目結構分析4、準備工作

從圖中我們可以看出，

Webpack

可以将多種靜态資源

js

、

css

、

less

轉換成一個靜态檔案，減少了頁面的請求。

什麼是Webpack

  • Webpack

     是一款

    子產品加載器兼打包工具

     ，它能把各種資源，如 JS、JSX、ES6、SASS、LESS、圖檔等都

    作為子產品

     來處理和使用。

  • 本質上，webpack是一個現代JavaScript應用程式的靜态子產品打包器(module bundler)

     。當webpack處理應用程式時，它會遞歸地建構一個依賴關系圖(dependency graph)（類似于Maven），其中包含應用程式需要的每個子產品，然後将所有這些子產品打包成一個或多個

    bundle

     。

為什麼要使用Webpack

  • ES5 (全浏覽器支援)

  • ES6 (常用，目前主流版本: webpack打包成為ES5支援! )
Webpack是當下最熱門的前端資源子產品化管理和打包工具，它可以将許多松散耦合的子產品按照依賴和規則打包成符合生産環境部署的前端資源。還可以将按需加載的子產品進行代碼分離，等到實際需要時再異步加載。通過

loader

 轉換，任何形式的資源都可以當做子產品，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;

2.4 Node.js 服務端

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運作環境。
  • 新版本都自帶

    npm

什麼是npm

  • npm

     ：一個軟體包管理工具
    • 類似于Linux的

      apt
    • 類似于Java中的``Maven`

  • YARN

     : NPM的替代方案，類似于Maven和Gradle的關系
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的預設包管理工具。通過 npm 可以安裝、共享、分發代碼,管理項目依賴關系。

2.5 Git 版本控制

Git是什麼？

  • Git是目前世界上最先進的分布式版本控制系統（沒有之一）。

Git有什麼特點？

  • 簡單來說就是：高端大氣上檔次！

那什麼是版本控制系統？

如果你用Microsoft Word寫過長篇大論，那你一定有這樣的經曆：

想删除一個段落，又怕将來想恢複找不回來怎麼辦？有辦法，先把目前檔案“另存為……”一個新的Word檔案，再接着改，改到一定程度，再“另存為……”一個新檔案，這樣一直改下去，最後你的Word文檔變成了這樣：

基于vue的仿餓了麼webapp1、項目介紹2、技術選型3、項目結構分析4、準備工作
過了一周，你想找回被删除的文字，但是已經記不清删除前儲存在哪個檔案裡了，隻好一個一個檔案去找，真麻煩。

​ 看着一堆亂七八糟的檔案，想保留最新的一個，然後把其他的删掉，又怕哪天會用上，還不敢删，真郁悶。

​ 更要命的是，有些部分需要你的财務同僚幫助填寫，于是你把檔案Copy到U盤裡給她（也可能通過Email發送一份給她），然後，你繼續修改Word檔案。一天後，同僚再把Word檔案傳給你，此時，你必須想想，發給她之後到你收到她的檔案期間，你作了哪些改動，得把你的改動和她的部分合并，真困難。

​ 于是你想，如果有一個軟體，不但能自動幫我記錄每次檔案的改動，還可以讓同僚協作編輯，這樣就不用自己管理一堆類似的檔案了，也不需要把檔案傳來傳去。如果想檢視某次改動，隻需要在軟體裡瞄一眼就可以，豈不是很友善？

​ 這個軟體用起來就應該像這個樣子，能記錄每次檔案的改動：

版本 檔案名 使用者 說明 日期
1 service.doc 張三 删除了軟體服務條款5 7/12 10:38
2 service.doc 張三 增加了License人數限制 7/12 18:09
3 service.doc 李四 财務部門調整了合同金額 7/13 9:51
4 service.doc 張三 延長了免費更新周期 7/14 15:17
​ 這樣，你就結束了手動管理多個“版本”的史前時代，進入到版本控制的20世紀。

3、項目結構分析

3.1 檔案夾結構 

webapp-vue-eleme
	|-- build : webpack相關的配置檔案夾(基本不需要修改)
		|-- dev-server.js : 通過express啟動背景伺服器
	|-- config: webpack相關的配置檔案夾(基本不需要修改)
		|-- index.js: 指定的背景服務的端口号和靜态資源檔案夾
	|-- node_modules
	|-- src : 源碼檔案夾
		|-- assets: 靜态資源(js、css、圖檔等)
		|-- components: vue元件及其相關資源檔案夾
		|-- app.vue: 應用根主元件
		|-- main.js: 應用入口js
	|-- static: 靜态資源檔案夾
	|-- .babelrc: babel的配置檔案
	|-- .editorconfig: 通過編輯器的編碼/格式進行一定的配置
	|-- .eslintignore: eslint檢查忽略的配置
	|-- .eslintrc.js: eslint檢查的配置
	|-- .gitignore: git版本管制忽略的配置
	|-- index.html: 首頁面檔案
	|-- package.json: 應用包配置檔案 
	|-- README.md: 應用描述說明的readme檔案

3.2 vue元件

  • app.vue
    • 應用的根元件
  • 所有的元件都在

    src/compoents/

     下
    • 1.header.vue
      • 頁面頭部顯示商家基本資訊的元件
    • 2.goods.vue
      • 商品分路由元件: 商品清單/購物車相關功能
    • 3.ratings.vue
      • 評價分路由元件: 商品評價清單
    • 4.seller.vue
      • 商家詳情分路由元件: 顯示商家詳情
    • 5.star.vue
      • 星級評價元件
    • 6.food.vue
      • 商品清單元件: 顯示商品分類/商品清單, 購物項加減
    • 7.cartcontrol.vue
      • 購物項操作元件: 增加/減少某個購物項的數量
    • 8.ratingselect.vue
      • 商品評論清單元件: 過濾檢視商品評價清單
    • 9.split.vue
      • 分隔線小元件
    • 10.shopcart.vue
      • 底部購物車元件: 顯示購物項清單及相關操作

4、準備工作

4.1 環境描述

  • Windows 10 2004 專業版
  • Node.js > 10.0（

    node --version

     ）
  • npm > 6.0（

    npm version

     ）
  • Git > 2.6（

    git --version

     ）
  • Vue > 2.5（

    vue -V

     ）

4.2 安裝必要軟體

  1. 安裝Node.js
  • 官網：http://nodejs.cn/
  • 新版本的Node.js都内置

    npm

     了！
官網提供了各個平台的不同編譯版本，按需下載下傳。
  1. 安裝Git
  • 官網：https://git-scm.com/
  • 安裝好後，在檔案見右鍵可看到兩個新選項：
    • Git Bash（一般是使用這個）
    • Git GUI

4.3 搭建其他環境

  1. npm

     設定全局加速
  • 使用淘寶鏡像加速 
# 若安裝失敗，則将源npm源換成淘寶鏡像
# 因為npm安裝插件是從國外伺服器下載下傳，受網絡影響大
npm config set registry https://registry.npm.taobao.org
  1. 全局安裝

    cnpm

  • cnpm

     ：中國

    npm

     鏡像的用戶端 
# -g表示全局安裝
npm install cnpm -g
  1. 安裝

    cue-cli

     
# 安裝
cnpm install vue-cli -g

# 驗證是否安裝成功
vue list
  1. 本地電腦上建立一個存放本項目學習的根目錄(檔案夾)
  2. 在根目錄下,滑鼠右鍵,選擇

    git bash
  3. 使用腳手架

    vue-cli

     生成

    webpack

     模闆的初始化項目 
# 基于webpack模闆
# vue init webpack name
vue init webpack vue-eleme
  1. 進入

    vue-eleme

     目錄 
cd vue-eleme
  1. 安裝環境依賴 
# 必要工作，尤其是運作别人的項目
cnpm install

# cnpm執行失敗就換npm
# npm install
  1. 運作該項目 
cnpm run dev

# 一般使用上面的指令，用不了就換以下二選一
# npm run serve
# npm run start
注意事項：
  • 有時候網絡的問題，會出現各種問題，因為

    npm

     的伺服器在國外。這時候，重複執行指令多幾次，或者換成

    cnpm

     試試。
前端 # Vue vue node npm
上一篇: vue實戰：vue.js高仿餓了麼webapp
下一篇: 高仿“餓了麼”Vue項目（一）

繼續閱讀