前言
为解决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
调试了。