使用nodejs、ejsExcel、express、vuejs編寫一個excel轉json的工具——第一步：建立vuejs項目並搭建開發環境

最近開發一個h5的遊戲，須要一個excel轉json的工具，網上找了找，沒有發現適合的工具。想到本身以前用nodejs、express和vuejs作過一個網站，也用過ejsExcel插件，因而本身動手作了一個。這裏簡單的記錄一下開發過程，

給本身留個記念。

這是本系列的第一篇博客，重新建項目開始吧。

1.須要按照nodejs和vuejs

安裝的方法這裏不提了，網上找一找，教程不少。

安裝好了能夠看一下nodejs、vuejs和express的版本號：

2.使用vuejs建立一個帶webpack的項目

建立命令： vue init webpack developer_tools

新建過程當中須要填寫做者名稱、單元測試和一些配置，按需選擇就能夠了，這是我建立好的截圖：

 

3.進入項目路徑，使用 npm install 安裝項目依賴，很重要

我習慣使用簡寫命令npm i 來安裝依賴

命令：npm i

安裝過程須要等幾分鐘。安裝好了的截圖以下：

 

4.使用npm run build 命令編譯項目

編譯結果以下：

 

5.使用npm run start 命令運行項目

運行命令截圖：

這時候會自動打開運行網頁，網頁內容以下：

 

 

7.使用express generator生成器生成後端服務框架

（1）使用命令：express server 引入express 

執行後的截圖：

（2）進入生成的server目錄，使用npm i 命令安裝express的依賴

 

（3）運行express，而後訪問本機的3000端口，就能夠看到express頁面了：

運行express：

用瀏覽器訪問 http://localhost:3000/#/ ，就能夠看到express運行頁面了：

 

 

8.安裝ejsExcel模塊

以前用過ejsExcel插件，功能很強大。這是它的hithub地址：https://github.com/sail-sail/ejsExcel

安裝到開發目錄裏面，安裝命令： npm i ejsexcel

 

 9.使用pm2插件啓動項目

（1）開發模式下，修改文件後，使用npm run dev 便可從新啓動項目。可是每次修改後都要輸入一次命令，很麻煩，因此咱們使用node進程管理器pm2來啓動項目，這樣每次修改後，不用手動啓動項目，pm2會自動執行啓動命令。

pm2的介紹和使用方式能夠參考這個頁面：https://www.npmjs.com/package/pm2

pm2的安裝命令以下：npm i pm2 -g

安裝好以後能夠查看一下pm2版本：

（2）啓動項目時用到的命令npm run start 和 npm run dev 在項目的配置文件package.json中有定義：

 

能夠看到，使用dev 和start 啓動項目，執行的是對應的js文件。

（3）根據上面的敘述，使用pm2來啓動項目：

命令：pm2 start build/dev-server.js --watch

啓動後pm2會顯示項目的信息(這裏已經用 pm2 start server/bin/www --watch 命令啓動了express，因此看到了 www的信息)：

 

（4）測試一下修改文件後，pm2時候會自動重啓項目：

新建一個名爲「Pm2Test  」的vue 組件：

 

（5）將這個組件加入到router中：

 

(6)直接訪問新添加的頁面pm2：

能夠看到，pm2組件能夠訪問到，說明修改文件後，pm2會自動幫咱們重啓項目。

 10.使用webstorm調試項目

編程過程當中會常常debug，單靠打印無濟於事，因此須要打斷點調試。這裏咱們配置下webstorm，以便調試。

（1）按圖中所示的順序，配置調試信息，而後點擊OK

（2）配置完調試信息後，就能夠打斷點調試了：

注意，啓動調試以前須要關閉pm2，不然會發生文件訪問衝突，關閉pm2的命令以下：

pm2 stop server/bin/www --watch

 

 

（3）這裏調試的是express，調試配置的js文件是 server/bin/www.js 文件，配置圖以下：

 

搭建好開發環境後，就能夠愉快地編寫項目了