# 介绍
我们额外提供了WebNuxt
工程,来满足SEO
和更快的首屏加载
需求;本工程是BuildAdmin
的Nuxt (opens new window)版本,只含会员前台,不含管理员后台,是仅供会员访问的另外一个站点。
- WebNuxt代码仓库 (opens new window)
https://gitee.com/wonderful-code/build-admin-nuxt
- Vue官方的SSR文档 (opens new window)
https://cn.vuejs.org/guide/scaling-up/ssr.html
- Nuxt完整文档(英文) (opens new window)
https://nuxt.com/docs/getting-started/introduction
- Nuxt学习指南(中文) (opens new window)
https://www.nuxtjs.org.cn/
目前此文档并不全面
# 开始
# 进入到 buildadmin 项目的根目录
cd buildadmin
# 克隆 web-nuxt 工程到项目根目录,请注意需要克隆到 web-nuxt 目录,以便后续通过后台安装模块
git clone https://gitee.com/wonderful-code/build-admin-nuxt web-nuxt
# 进入到 web-nuxt 目录
cd web-nuxt
# 安装依赖
pnpm install
# yarn install
# 启动服务 -o 表示自动打开浏览器
pnpm dev -o
# 请注意还需启动`BuildAdmin`的服务端
php think run
- 安装完成后
web-nuxt
工程的目录路径为buildadmin/web-nuxt
以方便后续安装模块,开发时使用编辑器只打开此目录即可。 - 后续继续使用
git
更新web-nuxt
工程,若后续在模块市场安装模块时提示您系统版本不足
,请您在更新系统时,同时更新web-nuxt
工程。
WebNuxt
提供站点首页
与会员中心
,它看起来和BuildAdmin
自带的前台几乎一样,但若您的站点存在SEO
需求,我们建议您前台的所有开发都基于WebNuxt
而不是内置的纯vue
前台,未来CMS、社区
等模块,我们也会基于本工程进行开发,且涉及到前台的模块,都优先提供WebNuxt
版本。
# 二次开发
在二次开发之前,请您确保已经理解服务端渲染
、客户端激活
等等,它与纯vue
项目的开发有多个关键概念不相同;
我们在Nuxt
工程上,还原了一些BuildAdmin
原有的设计和代码,其中包括:
- 字体图标
Icon
组件与Icon
选择器(无iconfont
图标)。 - 状态管理
- 表单项目组件(formItem)
- 输入组件(baInput)
- 表单验证
- CSS/SCSS样式 与原有的设计几乎一致
- 辅助工具/函数 只部分