基於vue2+nuxt構建的高仿餓了麼（2018版）
前言
高仿餓了麼，以nuxt作為vue的服務端渲染，適合剛接觸或者準備上vue ssr的同學參考和學習
效果演示
檢視demo請戳這裡 （請用chrome手機模式預覽）
移動端掃描下方二維碼
API介面文件
介面文件地址 （基於apidoc）
技術棧
vue2 + vuex + vue-router + mint-ui + nuxt
專案執行
git clone [email protected]:EasyTuan/nuxt-elm.git # 國內映象加速節點:[email protected]:easytuan/node-elm-api.git cd nuxt-elm npm install npm run dev #模版快速生成 npm run tep `檔名` # pm2部署 npm run start
補充
此專案有配套的後臺系統，如果想體驗前後臺同時開發，可以下載對應的後臺系統： 後臺專案傳送地址 。
如果只做前端開發，請忽略這句話。
目標功能
- [x] 商家列表 -- 完成
- [x] 購物車功能 -- 完成
- [x] 餐館食品列表頁 -- 完成
- [x] 店鋪評價頁面 -- 完成
- [x] 商家詳情頁 -- 完成
- [x] 登入、註冊 -- 完成
- [x] 修改密碼 -- 完成
- [x] 個人中心 -- 完成
- [x] 紅包 -- 完成
- [x] 收貨地址 -- 完成
業務介紹
目錄結構
├── assets// 靜態資源 │├── images// 圖片資源 │├── services// api請求 │├── styles// 樣式檔案 │└── utils// 常用工具類 ├── components// 元件 ├── config │└── index.js// 配置檔案 ├── layouts// 佈局 ├── middleware// 中介軟體 ├── pages// 頁面 ├── plugins// 外掛 ├── static// 靜態資源 └── store//vuex狀態樹
部分截圖展示
首頁展示
個人資料
我的
訂餐
商家評價
說明
如果對您有幫助，您可以 點選專案 "Star" 支援一下 謝謝！ ^_^
或者您可以 "follow" 一下，我會不斷開源更多的有趣的專案
如有問題請直接在 Issues 中提，或者您發現問題並有非常好的解決方案，歡迎 PR :+1:
開發日常記錄
nuxt模版搭建
這裡關於專案初始化，我是直接使用的 Nuxt 官網提供的 starter 模板
# 安裝 vue-cli npm install -g vue-cli # 初始化專案 vue init nuxt-community/starter-template nuxt-ssr-demo # 安裝依賴 cd nuxt-ssr-demo npm install # 啟動本地服務 npm run dev
訪問 http://localhost:3000 ，現在我們來看下初始化好的專案目錄
├── assets// 靜態資源 ├── components// 全域性元件 ├── layouts// 頁面佈局 ├── middleware// 中介軟體 ├── pages// 路由頁面 ├── static// 靜態資源，打包檔名不會被hash ├── store// vuex ├── nuxt.config.js// nuxt配置檔案 ├── package.json ├── README.md
注意：nuxt預設會讀取pages裡面的vue檔案，自動生成路由，如需要自定義路由，可在nuxt.config.js中配置對應引數。
request請求封裝
資料和展示層的剝離是有必要的，這也是為什麼前端都提倡MV*的設計模式，而對request請求封裝是我們第一步要完成的。這裡我選了axios作為HTTP請求客戶端，axios相容瀏覽器端和node端，同時提供了請求攔截、響應攔截等讓我們開發更加愉快的功能。
在 config/index.js 中寫入：
const json = require('../package.json');
const port = json.config.nuxt.port;
module.exports = {
IS_RELEASE: true, // true線上，false測試
BASE_URL: `http://localhost:${port}/api`, // 測試
// BASE_URL: `https://elm.caibowen.net/api`, // 生產
// IMG_URL: 'http://localhost:9000/', // 測試
IMG_URL: 'https://easytuan.gitee.io/node-elm-api/public/', // 生產（使用碼雲Gitee Pages 服務）
HEADERS: {
'Content-Type': 'application/json;charset=UTF-8'
},
TIMEOUT: 12000, // api超時時間
};
在 assets/utils/request.js 中寫入：
import axios from 'axios';
import config from '~/config';
import { Toast } from 'mint-ui';
axios.defaults.baseURL = config.BASE_URL;
axios.defaults.timeout = config.TIMEOUT;
axios.defaults.headers = config.HEADERS;
// 請求攔截器
axios.interceptors.request.use( request => {
if (!config.IS_RELEASE) {
console.log(
`${new Date().toLocaleString()}【 M=${request.url} 】P=`,
request.params || request.data,
);
}
return request;
}, error => {
return Promise.reject(error);
});
export default async (options = { method: 'GET' }) => {
let isdata = true;
if (
options.method.toUpperCase() !== 'POST'
&& options.method.toUpperCase() !== 'PUT'
&& options.method.toUpperCase() !== 'PATCH'
) {
isdata = false;
}
const res = await axios({
method: options.method,
url: options.url,
data: isdata ? options.data : null,
params: !isdata ? options.data : null,
});
if (res.status >= 200 && res.status < 300) {
if (!config.IS_RELEASE) {
console.log(
`${new Date().toLocaleString()}【介面響應：】`,
res.data,
);
}
// 瀏覽器環境彈出報錯資訊
if(typeof window !== "undefined" && res.data.code !== 0) {
Toast(res.data.msg);
}
return res.data;
}else {
if(typeof window !== "undefined" && res.data.code !== 0) {
Toast('請求錯誤');
}
}
};
最後所有api請求都寫進server.js檔案，方便統一管理。
跨域處理
使用過 vue 的同學，肯定知道對於專案中的跨域， vue-cli 對 webpack 中的 proxy 選項進行了一層封裝。它暴露出來的是一個叫 proxyTable 的選項，是對 webpack 中的 proxy 和其三方外掛 http-proxy-middleware 的一個整合。
不幸的 Nuxt 中沒有 proxyTable 這麼一個配置項來進行跨域的配置。當然幸運的是，在 Nuxt 中你可以直接通過配置 http-proxy-middleware 來處理跨域。更幸運的是 Nuxt 官方提供了兩個包來處理 axios 跨域問題。
首先，進行安裝
npm i @nuxtjs/axios @nuxtjs/proxy -D
然後在 nuxt.config.js 檔案裡進行配置
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: [
[
'/api',{
// target: 'http://localhost:9000',
target: 'https://elm-api.caibowen.net',
changeOrigin: true,
pathRewrite: { '^/api' : '/' }
}
]
],
然後你就可以安心使用你的 axios 進行跨域請求了
專案部署
到這一步的同學，你得先確保你擁有一個自己的伺服器。如果沒有的話，趕緊去買一個（我不會和你說AWS和google雲有提供免費一年的雲伺服器試用）
OK，文章繼續。在進行部署講解前，我們先看一下 Nuxt 提供的幾個命令
| 命令 | 描述 |
|---|---|
| nuxt | 啟動一個熱載入的 Web 伺服器（開發模式） localhost:3000 |
| nuxt build | 利用 webpack 編譯應用，壓縮 JS 和 CSS 資源（釋出用） |
| nuxt start | 以生成模式啟動一個 Web 伺服器 ( nuxt build 會先被執行) |
| nuxt generate | 編譯應用，並依據路由配置生成對應的 HTML 檔案 (用於靜態站點的部署) |
開始部署
上傳程式碼到伺服器，然後執行命令nuxt build && nuxt start 監聽3000埠。
接下來，開始配置你的 nginx （用於埠轉發）
server {
# 埠，http為 80，如果部署了https請監聽 443
listen 80;
# 域名
server_name elm.caibowen.net;
# 反向代理
location / {
proxy_pass http://localhost:3000;
}
}
然後重啟 nginx
nginx -s restart
然後你就能在 http://elm.caibowen.net 訪問到你的網站啦
最後
對於 Nuxt ，在使用層面，是比較簡單、好上手的。相對 vue-ssr 來說，它大大的簡化了開發的配置，讓開發人員可以只需思考業務的開發，而不用太去擔心檔案的配置。其中 Nuxt 通過監聽 pages 目錄檔案變更並自動生成路由更是直接省去了我們平常對於路由的配置。
但是，目前 Nuxt 整體還是有待提高的，目前社群相關的三方外掛比較有限，市面上相關的參考資料也相對比較少。
不管如何，希望 Nuxt 社群可以越來越好吧 ~