手把手教你除錯構建一個Vue/小程式商城專案原始碼

下面將詳細的介紹weiphp5.0商城專案的除錯打包上線的流程：

1. 安裝NodeJs/NPM
2. 安裝CNPM(可忽略)
3. 執行專案
4. 打包上線專案

1. 安裝NodeJs

推薦到NodeJS的官網下載安裝包

下載完成後雙擊下載好的檔案開始安裝,點選next進入下一步，勾選同意協議，繼續下一步。然後選擇安裝的位置，預設是在C盤，改成D盤安裝，這是個好習慣，建議保持。全部next安裝就好了

安裝NodeJs之後預設就有NPM，這時在開啟命令列（快捷鍵window+r,輸入cmd)

在命令列中輸入node -v/npm -v，如無意外有版本號輸入，則表示安裝好了

2. 安裝CNPM

這步可以忽略，如果你對自己的網速非常自信的話，cnpm是國內淘寶的映象,可以更快的下載你所需要的包，執行以下命令安裝cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

安裝完成後在命令列中輸入cnpm -v，如果和下面輸出大致相同，就安裝成功了，以後就可以使用cnpm代替npm安裝各種包了。

3. 執行商城專案

3.1 下載專案

商城前後端原始碼在codeing上,下載完之後解壓就可以之後開啟就可以看到下面這些目錄檔案：

3.2 執行Vue專案

首頁我們進入根目錄下./mpvue/wap/專案資料夾裡，用你喜歡的編輯器的命令列開啟它，這裡推薦vscode，也可以使用window命令列工具

如果你安裝了cnpm就可以使用cnpm install 反之則 npm install：

上面顯示有27個包要安裝，目前安裝了6個，默默等待安裝...，直接看到類似All packages installed的提示，就表示安裝成功了。

接下來我們輸入npm run serve執行它，會在本地開啟一個8080的埠，默默進度到100%...

直到出現有連結，`開啟這個連結直接在本地除錯這個專案了：

執行之後的專案是這樣的，推薦使用谷歌chrome瀏覽器，功能更強大，好用

3.3 執行小程式專案

同上，我們也是先進入到根目錄下的./mpvue/weiapp/專案資料夾裡，使用命令列到達它的路徑

和上面一樣輸入cnpm install 或者 npm install安裝依賴的包，安裝完成後會出現一個node_modules的大資料夾，裡面就是你所安裝的所有依賴：

接下來我們執行npm run dev，這個和vue專案不一樣，但是在package.json中可以自定義的

使用微信開發者工具開啟這個小程式專案，把Appid換成自己的，點選確定

開啟之後的專案是這樣滴，在編輯器裡修改程式碼,微信開發者工具就會自動重新整理程式碼，進行除錯小程式方便多了

4. 打包上線商城專案

vue網頁商城和小程式商城上線都是先通過npm run build打包構建一下

4.1 打包上線Vue網頁專案

相比於小程式，Vue商城專案也很簡單，只要把構建好的資料夾上傳到伺服器，就可以直接開啟執行了，預設生成的檔案是在專案根目錄下的public/wap裡，你也可以在vue.config.js裡面修改你生成之後的路徑，建議不要修改，因為可能商城後臺也寫了這個預設的路徑。

4.2 打包上線小程式專案

構建好的之後，開啟開發者工具，點選上傳程式碼到微信開發者後臺進一步操作就可以了