基于Node.js、EJSExcel、Express与Vue.js构建Excel转JSON工具：首阶段——Vue.js项目初始化及开发环境配置

最近开发一个h5的游戏&＃xff0c;需要一个excel转json的工具&＃xff0c;网上找了找&＃xff0c;没有发现适合的工具。想到自己之前用nodejs、express和vuejs做过一个网站&＃xff0c;也用过ejsExcel插件&＃xff0c;于是自己动手做了一个。这里简单的记录一下开发过程&＃xff0c;

给自己留个纪念。

这是本系列的第一篇博客&＃xff0c;从新建项目开始吧。

1.需要按照nodejs和vuejs

安装的方法这里不提了&＃xff0c;网上找一找&＃xff0c;教程很多。

安装好了可以看一下nodejs、vuejs和express的版本号&＃xff1a;

2.使用vuejs创建一个带webpack的项目

创建命令&＃xff1a; vue init webpack developer_tools

新建过程中需要填写作者名称、单元测试和一些配置&＃xff0c;按需选择就可以了&＃xff0c;这是我创建好的截图&＃xff1a;

3.进入项目路径&＃xff0c;使用 npm install 安装项目依赖&＃xff0c;很重要

我习惯使用简写命令npm i 来安装依赖

命令&＃xff1a;npm i

安装过程需要等几分钟。安装好了的截图如下&＃xff1a;

4.使用npm run build 命令编译项目

编译结果如下&＃xff1a;

5.使用npm run start 命令运行项目

运行命令截图&＃xff1a;

这时候会自动打开运行网页&＃xff0c;网页内容如下&＃xff1a;

7.使用express generator生成器生成后端服务框架

&＃xff08;1&＃xff09;使用命令&＃xff1a;express server 引入express 

执行后的截图&＃xff1a;

&＃xff08;2&＃xff09;进入生成的server目录&＃xff0c;使用npm i 命令安装express的依赖

&＃xff08;3&＃xff09;运行express&＃xff0c;然后访问本机的3000端口&＃xff0c;就可以看到express页面了&＃xff1a;

运行express&＃xff1a;

用浏览器访问 http://localhost:3000/#/ &＃xff0c;就可以看到express运行页面了&＃xff1a;

8.安装ejsExcel模块

之前用过ejsExcel插件&＃xff0c;功能很强大。这是它的hithub地址&＃xff1a;https://github.com/sail-sail/ejsExcel

安装到开发目录里面&＃xff0c;安装命令&＃xff1a; npm i ejsexcel

 9.使用pm2插件启动项目

&＃xff08;1&＃xff09;开发模式下&＃xff0c;修改文件后&＃xff0c;使用npm run dev 即可重新启动项目。但是每次修改后都要输入一次命令&＃xff0c;很麻烦&＃xff0c;所以我们使用node进程管理器pm2来启动项目&＃xff0c;这样每次修改后&＃xff0c;不用手动启动项目&＃xff0c;pm2会自动执行启动命令。

pm2的介绍和使用方式可以参考这个页面&＃xff1a;https://www.npmjs.com/package/pm2

pm2的安装命令如下&＃xff1a;npm i pm2 -g

安装好之后可以查看一下pm2版本&＃xff1a;

&＃xff08;2&＃xff09;启动项目时用到的命令npm run start 和 npm run dev 在项目的配置文件package.json中有定义&＃xff1a;

可以看到&＃xff0c;使用dev 和start 启动项目&＃xff0c;执行的是对应的js文件。

&＃xff08;3&＃xff09;根据上面的叙述&＃xff0c;使用pm2来启动项目&＃xff1a;

命令&＃xff1a;pm2 start build/dev-server.js --watch

启动后pm2会显示项目的信息(这里已经用 pm2 start server/bin/www --watch 命令启动了express&＃xff0c;所以看到了 www的信息)&＃xff1a;

&＃xff08;4&＃xff09;测试一下修改文件后&＃xff0c;pm2时候会自动重启项目&＃xff1a;

新建一个名为“Pm2Test  ”的vue 组件&＃xff1a;

&＃xff08;5&＃xff09;将这个组件加入到router中&＃xff1a;

(6)直接访问新添加的页面pm2&＃xff1a;

可以看到&＃xff0c;pm2组件可以访问到&＃xff0c;说明修改文件后&＃xff0c;pm2会自动帮我们重启项目。

 10.使用webstorm调试项目

编程过程中会经常debug&＃xff0c;单靠打印无济于事&＃xff0c;所以需要打断点调试。这里我们配置下webstorm&＃xff0c;以便调试。

&＃xff08;1&＃xff09;按图中所示的顺序&＃xff0c;配置调试信息&＃xff0c;然后点击OK

&＃xff08;2&＃xff09;配置完调试信息后&＃xff0c;就可以打断点调试了&＃xff1a;

注意&＃xff0c;启动调试之前需要关闭pm2&＃xff0c;否则会发生文件访问冲突&＃xff0c;关闭pm2的命令如下&＃xff1a;

pm2 stop server/bin/www --watch

&＃xff08;3&＃xff09;这里调试的是express&＃xff0c;调试配置的js文件是 server/bin/www.js 文件&＃xff0c;配置图如下&＃xff1a;

搭建好开发环境后&＃xff0c;就可以愉快地编写项目了