【全栈开发】从0开始搭建一个图书管理系统【二】前端搭建

【全栈开发】从0开始搭建一个图书管理系统【二】前端搭建

前言

之前已经搭建了后端框架：

https://lizhiyong.blog.csdn.net/article/details/145915249

现在已经毫无疑问必须搞前后端分离了，所以光有后端是不行的，还得有个前端页面！！！但是从头开始搭建一个前端对于大数据学徒工来说困难重重毕竟从头开始学习的内容太多了！！！但是只需要会运行、打包及二开就可以实现所需的功能了，所以首先要做的事情就是选一个画风不那么古老、二开容易的前端框架。如果是使用若依可以直接选一个合适的版本。

选型

https://github.com/vbenjs/vue-vben-admin/blob/main/README.zh-CN.md

在全球最大的成年人技术交流网站有个很火爆的前端项目：Vue Vben Admin，看介绍就很符合需求！！！

中文网站：https://www.vben.pro/

可以看到界面做的非常炫丽！！！接下来就可以照着运行一下试试效果！！！

更新node.js

C:\Users\zhiyong>node -v
v16.17.0

C:\Users\zhiyong>node -v
v22.14.0

C:\Users\zhiyong>pnpm -v
'pnpm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

C:\Users\zhiyong>npm install -g pnpm

added 1 package in 10s

1 package is looking for funding
  run `npm fund` for details
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
npm notice To update run: npm install -g npm@11.1.0
npm notice

C:\Users\zhiyong>pnpm -v
10.4.1

C:\Users\zhiyong>

需要新一点的node版本。

允许脚本执行

Win10如果把node安装到了C盘且之前没有配置权限，可能无法使用pnpm的部分命令，会导致依赖报错，项目也就无法正常运行了！！！

要管理员权限在Power Shell中执行：

PS C:\WINDOWS\system32> Set-ExecutionPolicy -Scope CurrentUser

位于命令管道位置 1 的 cmdlet Set-ExecutionPolicy
请为以下参数提供值:
ExecutionPolicy: RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): Y
PS C:\WINDOWS\system32> get-ExecutionPolicy
RemoteSigned
PS C:\WINDOWS\system32>

之后就可以正常运行前端项目。

运行前端项目

笔者http下载好以后使用WebStorm导入运行：

cd E:\library\vben\vue-vben-admin-main
corepack enable
pnpm install
pnpm dev

可以看到有Ant Design、element等多种模式，当然是选第二种！！！

它就会很智能地给出各种网络下访问的地址！！！

验证

可以看到成功运行起来了！！！那么接下来的事情就是对它做二次开发！！！最后搞个Nginx转发及内网穿透就可以暴露到公网提供服务！！！

转载请注明出处：https://lizhiyong.blog.csdn.net/article/details/145916701