Express+Mongoose(MongoDB)+Vue2全棧微信商城項目全記錄(一)

最近用vue2做了一個微信商城項目，因為做的比較倉促，所以一邊寫一下整個流程，一邊稍做優化。

　　項目github地址：https://github.com/seven9115/vue-fullstack

　　所用技術棧：Express+Mongoose(MongoDB)+Vue2。

　　運行環境：node.js

　　后台框架：express.js

　　數據庫：Mongoose.js (MongoDB)

　　前端腳手架：vue-cli

　　用戶認證：JSON WEB TOKEN

　　所用插件：vue-scroller/touchslider/layer。

　　關於前后端分離：restful接口。

　　關於跨域：proxyTable,代理模式。

　　關於請求：axios+promise。

　　關於頁面狀態：vuex+sessionstorge。

部分效果圖：

起始環境

1、安裝node.js(下載地址)

2、安裝淘寶鏡像，沒有vpn的情況下建議安裝。沒有安裝的話后續install npm包，cnpm替換成npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、全局安裝vue-cli

cnpm install --global vue-cli

4、創建工作空間：在命令行輸入以下命令，我這里直接安裝在E盤，取名wechat。

E:
vue init webpack wechat

wechat是項目名稱。

命令輸入后，會進入安裝階段，需要用戶輸入一些信息

　　Project name (wechat)                    項目名稱（注：名字不能有大寫字母）。

　　Project description (A Vue.js project)  項目描述，也可直接點擊回車，使用默認名字。

　　Author (........)       作者。

　　Runtime + Compiler: recommended for most users    運行加編譯，推薦，后面我一般一直敲回車。

　　Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   僅運行時，選擇第一個。

　　Install vue-router? (Y/n)    是否安裝vue-router，這是官方的路由，大多數情況下都使用。

　　Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響整體的運行，這也是為了多人協作，新手就不用了，一般項目中都會使用。ESLint官網

　　接下來也是選擇題Pick an ESLint preset (Use arrow keys)            選擇一個ESLint預設，編寫vue項目時的代碼風格，因為我選擇了使用ESLint

　　Standard (https://github.com/feross/standard)    js的標准風格

　　AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法

　　none (configure it yourself)    這個不用說，自己定義風格

　　具體選擇哪個因人而異吧  ，我選擇標准風格

　　Setup unit tests with Karma + Mocha? (Y/n)  是否安裝單元測試，我選擇安裝

　　Setup e2e tests with Nightwatch(Y/n)?     是否安裝e2e測試 ，我選擇安裝

完成

 此時進入項目文件夾，安裝依賴包，運行項目，可在瀏覽器看到 http://localhost:8080/#/ 初始頁面。

1、cd wechat 進入項目目錄。

2、cnpm install 安裝依賴包

3、npm run dev 運行開發環境。

 安裝mongodb：從mogodb官網下載mongodb並安裝。

 設置跨域代理：修改項目根目錄下/config/index.js里dev屬性增加

  proxyTable:{
        '/api': {
            // 測試環境
            target: 'http://localhost:8088/api',  // 接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/api': ''   //需要rewrite重寫的,
            }              
        }
    }

 mongoose建立rest接口服務：由於篇幅太長了，放到下一篇繼續寫，github上現己更新測試接口代碼。項目github地址：https://github.com/seven9115/vue-fullstack 。