head-img Force's Blog

「vuePoem开源后台」虚拟机Centos7启动vuePoem开发模式

webpack,PHP,Vue,NodeJS,JavaScript,VuePoem

前言

为解决windows开发者能使用vuePoem自带CLI脚本以及开发即生产环境,特出此基于虚拟机开发教程。
本文章可供windows用户使用虚拟机参考以及linux用户参考 官方文档

准备物料

提前安装工具

yum install wget
yum install vim
yum install git

1. 安装lnmp

进入home目录,使用一键安装lnmp脚本安装(本案例使用lnmp.org提供脚本,您也可以使用bt.cn)

cd ~ && wget http://soft.vpser.net/lnmp/lnmp1.9.tar.gz -cO lnmp1.9.tar.gz && tar zxf lnmp1.9.tar.gz && cd lnmp1.9 && ./install.sh lnmp

待脚本下载后会自动运行,需要您选择。以下是步骤:

+------------------------------------------------------------------------+
|          LNMP V1.9 for CentOS Linux Server, Written by Licess          |
+------------------------------------------------------------------------+
|        A tool to auto-compile & install LNMP/LNMPA/LAMP on Linux       |
+------------------------------------------------------------------------+
|           For more information please visit https://lnmp.org           |
+------------------------------------------------------------------------+
You have 11 options for your DataBase install.
1: Install MySQL 5.1.73
2: Install MySQL 5.5.62 (Default)
3: Install MySQL 5.6.51
4: Install MySQL 5.7.38
5: Install MySQL 8.0.29
6: Install MariaDB 5.5.68
7: Install MariaDB 10.3.35
8: Install MariaDB 10.4.25
9: Install MariaDB 10.5.16
10: Install MariaDB 10.6.8
0: DO NOT Install MySQL/MariaDB
Enter your choice (1, 2, 3, 4, 5, 6, 7, 8, 9, 10 or 0): 4
Using Generic Binaries [y/n]:y

选择4「mysql5.7」,Using Generic Binaries选择「y」

===========================
Please setup root password of MySQL.
Please enter: 123456

设置密码,举例123456(根据实际情况设置)

===========================
Do you want to enable or disable the InnoDB Storage Engine?
Default enable,Enter your choice [Y/n]: y

开启,选择「y」

===========================
You have 9 options for your PHP install.
1: Install PHP 5.2.17
2: Install PHP 5.3.29
3: Install PHP 5.4.45
4: Install PHP 5.5.38
5: Install PHP 5.6.40 (Default)
6: Install PHP 7.0.33
7: Install PHP 7.1.33
8: Install PHP 7.2.34
9: Install PHP 7.3.33
10: Install PHP 7.4.30
11: Install PHP 8.0.20
12: Install PHP 8.1.7
Enter your choice (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12): 10

php版本选择「10」

===========================
You have 3 options for your Memory Allocator install.
1: Don't install Memory Allocator. (Default)
2: Install Jemalloc
3: Install TCMalloc
Enter your choice (1, 2 or 3): 1

默认就行选择「1」

Press any key to install...or Press Ctrl+c to cancel

按任意键继续,等待自动安装

+------------------------------------------------------------------------+
|          LNMP V1.9 for CentOS Linux Server, Written by Licess          |
+------------------------------------------------------------------------+
|           For more information please visit https://lnmp.org           |
+------------------------------------------------------------------------+
|    lnmp status manage: lnmp {start|stop|reload|restart|kill|status}    |
+------------------------------------------------------------------------+
|  phpMyAdmin: http://IP/phpmyadmin/                                     |
|  phpinfo: http://IP/phpinfo.php                                        |
|  Prober:  http://IP/p.php                                              |
+------------------------------------------------------------------------+
|  Add VirtualHost: lnmp vhost add                                       |
+------------------------------------------------------------------------+
|  Default directory: /home/wwwroot/default                              |
+------------------------------------------------------------------------+
|  MySQL/MariaDB root password: 123456                          |
+------------------------------------------------------------------------+
+-------------------------------------------+
|    Manager for LNMP, Written by Licess    |
+-------------------------------------------+
|              https://lnmp.org             |
+-------------------------------------------+
nginx (pid 105396) is running...
php-fpm is runing!
 SUCCESS! MySQL running (105967)
State      Recv-Q Send-Q Local Address:Port               Peer Address:Port              
LISTEN     0      128          *:80                       *:*                  
LISTEN     0      128          *:22                       *:*                  
LISTEN     0      128       [::]:3306                  [::]:*                  
Install lnmp takes 54 minutes.
Install lnmp V1.9 completed! enjoy it.

看到此步骤安装完成

2. 安装Nvm(Node版本管理工具)

以下命令请逐行执行

# 拉取nvm
git clone https://github.com/creationix/nvm.git ~/nvm
# 添加环境变量
echo "source ~/nvm/nvm.sh" >> ~/.bashrc

# 不重启生效
source ~/.bashrc

# 安装node 14
nvm install 14

# 使用node 14
nvm use 14

# 查看ndoe.js版本及npm版本
node -v
npm -v

3. 拉取vuePoem源码

拉取vuePoem源码到~/vuePoem

git clone https://github.com/fsd-lsh/vuePoem ~/vuePoem

4. 使用CLI脚本启动vuePoem开发模式

  • 查看虚拟机IP,后续使用宿主机访问使用
ifconfig

作者得到的ip为192.168.52.3

  • 配置global.cnf
# 进入项目目录,修改VUE_HOST、PHP_HOST为虚拟机IP、mysql密码
cd ~/vuePoem && vim global.cnf
# Vue 配置
VUE_HOST=192.168.52.3
VUE_PORT=7777

# Php配置
PHP_HOST=192.168.52.3
PHP_PORT=8899

# Mysql配置
MYSQL_HOST=127.0.0.1
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASS=123456
MYSQL_DBNM=vuePoem
  • 开启PHP禁用函数
# 查看php.ini位置
php -i|grep ini

# 编辑,找到disable_functions行,删除`exec,`和`system,`并保存
vim /usr/local/php/etc/php.ini
  • CLI脚本辅助 More
# 进入项目目录
cd ~/vuePoem

# CLI脚本检查各项(执行后输出不应该有警告或者No)
./vuePoem check

# CLI脚本创建数据库 (自动创建数据库和导入数据表)
./vuePoem mysql

# CLI脚本启动开发模式,首次慢一些需要自动安装前端依赖
./vuePoem dev

看到下方提示表示即可访问

vue_part@1.0.0 dev /root/vuePoem/app/admin/vue
webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js

10% building modules 2/4 modules 2 active ...client/index.js?http://127.0.0.1:7777Unable to open browser. If you are running in a headless environment, please do not use the open flag.
17% building modules 61/105 modules 44 active ...pp/admin/vue/src/views/admin/menu.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
DONE Compiled successfully in 9985ms11:52:54 AM

I View: http://192.168.52.3:7777
I API: http://192.168.52.3:8899

使用刚才ifconfig查到的虚拟机IP+端口在宿主机访问前端,例如http://192.168.52.3:7777
用户名、密码:admin 123456

5. 共享虚拟机vuePoem到宿主机

~/vuePoem目录映射到主机目录,由于虚拟机种类很多,这里不介绍如何共享目录。

6. Done!

接下来在宿主机使用IDE或者编辑器打开虚拟机共享的vuePoem目录,即可实时开发及访问http://192.168.52.3:7777调试了。

点我评论
打赏本文
二维码


99

文章

24

标签

 推广