使用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 文件，配置图以下：

 

搭建好开发环境后，就能够愉快地编写项目了