搭建一个Vue数据库管理系统项目的运行环境（工具IDEA + HBuilder X）

 

1.软件安装

1.1 IDEA

进入IDEA官网https://www.jetbrains.com/idea/，Download 选择了community版本下载安装

1.2 HBuilder X

网上搜索HBuilder X 进行下载即可

1.3 Node.js

官网https://nodejs.org/zh-cn/，win10系统选择长期支持版即可，win7需要下载以前的版本（其它下载---以往的版本---下载支持安装的msi文件即可按提示“next”完成安装）

如果安装成功了，在该目录文件夹下空白处按住shift + 鼠标右键 选择“在此处打开命令窗口”，输入以下指令可以查看版本号表示安装成功啦

node -v

npm -v

为了不占用C盘内存，在Node.js文件夹下创建了两个新的文件夹命名如下：

用同样的方式打开命令窗口输入指令,其中引号里面前半部分是安装Node.js的路径

npm config set prefix "G:\Node.js\node_global"

npm config set cache "G:\Node.js\node_cache"

成功后配置环境变量，首先在系统变量中建立一个新的变量命名“NODE_PATH”，其中值为node_modules的路径“G:\Node.js\node_modules”，然后编辑用户变量的Path将原来npm的路径改为“G:\Node.js\node_global”，最后在命令窗口下输入指令安装好webpack

npm install webpack -g

同理，使用以下指令可以查看webpack版本

npm webpack -v

2.项目运行

可以将数据库的文件夹添加到桌面上方便在Navicat（数据库可视化工具）上逐个导入数据库的表（右键数据库---运行SQL文件---文件夹中选择---确认）

打开IDEA导入后端项目包，查看yml配置文件参数是否正确，确认无误后点击run运行即可

 

在HBuilder X中导入前端包，如果发现缺少了node_modules文件夹，在该包的文件夹目录下打开命令窗口输入以下指令自动安装项目依赖文件（这时自动生成node_modules文件夹）

npm install

回到HBuilder X中使用快捷键“ALT + C”打开终端使用以下指令运行成功后就会自动打开浏览器显示出项目页面

npm run dev