前端
环境准备
⚠️ 警告
首先需要在本地安装node,推荐node的版本16+
推荐使用的包管理工具是 yarn
首次使用yarn可以先安装=>npm install yarn -g
通过命令自动初始化项目
在官网下载安装包以后想为前端进行二开, 进入uniapp/
或者pc/
或者admin/
时,可以通过一条命令自动帮你初始化你的项目
下面以uniapp文件夹为例子使用
在终端命令行中输入
npm run init
- 运行npm run init 回车 选择是否安装依赖(如果已经安装过可以选择n)
2. 自动安装成功后会让你输入你的服务器域名地址,例如: https://xxx.com
3. 选择你需要运行的客户端
4. 运行成功(则表示当前项目的初始化已经完成,可以开始二开本项目了
⚠️ 警告
如果通过自动初始化项目的则不需要对下面的教程文档看了,只需看打包生产那部分就好
PC端(pc)
首次使用先安装yarn install
安装前请确保node版本为推荐的16+
复制env文件
- 复制
.env.example
,将复制的文件名修改为.env
- 复制
.env.development.example
,将复制的文件名修改为.env.developme
- 复制
.env.production.example
,将复制的文件名修改为.env.production
- 复制
复制以后示例
.env 应用全局配置(通常将他复制出来以后无需修改里面的内容
版本号
NUXT_VERSION=1.0.0
接口默认前缀
NUXT_API_PREFIX=/api
客户端类型
NUXT_CLIENT=4
基础路径
NUXT_BASE_URL=/pc/
是否开启ssr,填些任意值开启
NUXT_SSR=
端口号
NITRO_PORT=3000
点击打开
* .env.development
开发环境
请求域名
NUXT_API_URL='输入你的域名'
* .env.production
生产环境
请求域名
NUXT_API_URL='输入你的请求域名' //填空则跟着网站的域名来请求
**以上配置完成后可运行下面命令**
### PC端开发模式
* 运行开发环境
终端中运行命令
```shell
yarn dev
PC端生产模式(打包)
打包前修改接口请求域名,打开.env.production
,修改NUXT_API_URL
变量的值为项目安装部署的服务端地址
- 运行生产环境(非seo)
终端中运行命令
yarn build
注意
如果是非seo模式则不需要修改,将NUXT_API_URL
留空即可,这样请求接口时会自动读取当前的域名做为接口请求的域名
- 运行生产环境(seo)
打包支持seo模式
和非seo模式
(类似于vue的单页面应用),默认为非seo
模式,修改.env
文件可以修改模式
.env 文件中
# 是否开启ssr,填些任意值开启,为空则关闭
NUXT_SSR=1
终端中运行命令
yarn build:ssr
注意
- 首先拉取依赖包(拉取之前node版本必须为指定16+版本以上) =>
yarn install
- 拉取成功无错误时开始执行打包或者运行模式
- 如果 运行 或者 拉取 时有错误,请先尝试删除yarn.lock文件以及node_modules文件夹以后重复1和2步骤
移动端(uniapp)
首次使用先安装yarn install
安装前请确保node版本为推荐的16+
复制env文件
- 复制
.env.development.example
,将复制的文件名修改为.env.developme
- 复制
.env.production.example
,将复制的文件名修改为.env.production
- 复制
复制以后示例
点击打开
- .env.development 开发环境
NODE_ENV = 'development'
# 请求域名
VITE_APP_BASE_URL='输入你的请求域名'
- .env.production 生产环境
NODE_ENV = 'production'
# 请求域名
VITE_APP_BASE_URL='输入你的请求域名' //填空则跟着网站的域名来请求
uniapp在VSCode开发
开发模式
- 运行h5
终端中运行命令
yarn dev:h5
- 运行小程序
终端中运行命令
yarn dev:mp-weixin
运行完毕,打开微信开发者工具,点击左上角菜单项目
>导入项目
,导入地址选择uniapp/dist/dev/mp-weixin
,点击确定成功导入项目
生产模式
- 发行h5
- 终端中运行命令
shellyarn build:h5
- 上传打包好的代码到服务器或仓库
- 运行小程序
终端中运行命令
yarn build:mp-weixin
运行完毕,打开微信开发者工具,点击左上角菜单项目
>导入项目
,导入地址选择uniapp/dist/dev/mp-weixin
,点击确定成功导入项目
uniapp在HbuilderX开发
插件推荐安装:在运行过程中会自动安装需要插件
运行uniapp
注意
apple M系列芯片在uniapp下编译的报错处理:在node_modules
下复制粘贴esbuild-darwin-arm64
一份,重命名为esbuild-darwin-64
- 导入项目,点击HbuilderX左上角菜单
文件
>导入
>从本地目录导入
,目录选择uniapp
- 安装依赖,选中当前项目,点击HbuilderX左上角菜单
工具
>外部命令
>npm install
安装依赖 - 运行到h5,点击HbuilderX左上角菜单
运行
>运行到浏览器
>Chrome
- 运行到微信小程序,点击HbuilderX左上角菜单
运行
>运行到小程序模拟器
>微信开发者工具 - (uniapp)
注意
- 运行到微信小程序前,先配置好小程序的appid,点击
uniapp/src/manifest.json
,选择微信小程序配置
>微信小程序AppID
,输入appid即可 - 一般运行到微信小程序,会自动打开微信开发者工具,如果打开失败,可能是工具的服务端口没有打开,手动打开工具 -> 设置 -> 安全设置,将服务端口开启,也有可能是你配置的小程序appid中,你登录的账号不是这个小程序的开发者,只需要去微信小程序后台将该账号添加到开发者,重新运行即可
发行uniapp
- 发行到h5
- 点击HbuilderX左上角菜单
发行
>网站-PC Web或手机H5(仅适用于uni-app)
,输入网站标题,点击发行按钮,编译完成后可在uniapp/dist/build/h5
下 - 将h5下面的代码复制到发布目录,然后上传代码到服务器或仓库即可
- 点击HbuilderX左上角菜单
- 发行到小程序
- 点击HbuilderX左上角菜单
发行
>小程序-微信(仅适用于uni-app)
,输入小程序名称
和小程序appid
,点击发行,编译完成后会自动打开微信开发者工具 - 点击微信开发者工具的
上传
按钮,将代码上传到微信小程序后台
- 点击HbuilderX左上角菜单
后台管理(admin)
首次使用先安装yarn install
安装前请确保node版本为推荐的16+
复制env文件
- 复制
.env.development.example
,将复制的文件名修改为.env.developme
- 复制
.env.production.example
,将复制的文件名修改为.env.production
- 复制
复制以后示例
点击打开
- .env.development 开发环境
NODE_ENV = 'development'
# 请求域名
VITE_APP_BASE_URL='输入你的请求域名'
- .env.production 生产环境
NODE_ENV = 'production'
# 请求域名
VITE_APP_BASE_URL='输入你的请求域名' //填空则跟着网站的域名来请求
以上配置完成后可运行下面命令
后台管理开发模式(运行 admin
- 运行开发环境
终端中运行命令
yarn dev
后台管理生产模式(打包 admin
- 运行生产环境
终端中运行命令
yarn build
注意
- 首先拉取依赖包(拉取之前node版本必须为指定16+版本以上) =>
yarn install
- 拉取成功无错误时开始执行打包或者运行模式(yarn build / yarn dev)
- 如果 运行 或者 拉取 时有错误,请先尝试删除yarn.lock文件以及node_modules文件夹以后重复1和2步骤