前端开发
<p>[TOC]</p>
<h2>环境准备<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87"></a></h2>
<hr />
<pre><code class="language-css">⚠️ 警告
首先需要在本地安装node，推荐node的版本16+
推荐使用的包管理工具是 yarn
首次使用yarn可以先安装=&gt;`npm install yarn -g`</code></pre>
<h2>通过命令自动初始化项目<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E9%80%9A%E8%BF%87%E5%91%BD%E4%BB%A4%E8%87%AA%E5%8A%A8%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE"></a></h2>
<hr />
<p>在官网下载安装包以后想为前端进行二开， 进入<code>uniapp/</code>或者<code>pc/</code>或者<code>admin/</code>时，可以通过一条命令自动帮你初始化你的项目</p>
<p><strong>下面以uniapp文件夹为例子使用</strong><br />
在终端命令行中输入</p>
<pre><code>npm run init</code></pre>
<ol>
<li>运行npm run init 回车 选择是否安装依赖（如果已经安装过可以选择n）</li>
</ol>
<p><img src="https://doc.chatmoney.cn/docs/images/general/develop/web/uniapp_01.png" alt="" /><br />
2. 自动安装成功后会让你输入你的服务器域名地址，例如: <a href="https://xxx.com/"><a href="https://xxx.com">https://xxx.com</a></a></p>
<p><img src="https://doc.chatmoney.cn/docs/images/general/develop/web/uniapp_02.png" alt="" /><br />
3. 选择你需要运行的客户端</p>
<p><img src="https://doc.chatmoney.cn/docs/images/general/develop/web/uniapp_03.png" alt="" /><br />
4. 运行成功（则表示当前项目的初始化已经完成，可以开始二开本项目了</p>
<p><img src="https://doc.chatmoney.cn/docs/images/general/develop/web/uniapp_04.png" alt="" /> </p>
<p>⚠️ 警告</p>
<p>如果通过自动初始化项目的则不需要对下面的教程文档看了，只需看打包生产那部分就好</p>
<h2>PC端(pc)<a href="https://doc.chatmoney.cn/pro/develop/web.html#pc%E7%AB%AF-pc"></a></h2>
<hr />
<p><strong>首次使用先安装<code>yarn install</code>安装前请确保node版本为推荐的16+</strong></p>
<ul>
<li>
<p>复制env文件</p>
<ol>
<li>复制<code>.env.example</code>，将复制的文件名修改为<code>.env</code></li>
<li>复制<code>.env.development.example</code>，将复制的文件名修改为<code>.env.developme</code></li>
<li>复制<code>.env.production.example</code>，将复制的文件名修改为<code>.env.production</code></li>
</ol>
</li>
<li>
<p>复制以后示例<br />
<img src="https://doc.chatmoney.cn/docs/images/general/develop/web/pc_dev01.png" alt="" /> </p>
</li>
<li>.env 应用全局配置（通常将他复制出来以后无需修改里面的内容</li>
</ul>
<h1>版本号<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E7%89%88%E6%9C%AC%E5%8F%B7"></a></h1>
<p>NUXT_VERSION=1.0.0</p>
<h1>接口默认前缀<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E6%8E%A5%E5%8F%A3%E9%BB%98%E8%AE%A4%E5%89%8D%E7%BC%80"></a></h1>
<p>NUXT_API_PREFIX=/api</p>
<h1>客户端类型<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%B1%BB%E5%9E%8B"></a></h1>
<p>NUXT_CLIENT=4</p>
<h1>基础路径<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E5%9F%BA%E7%A1%80%E8%B7%AF%E5%BE%84"></a></h1>
<p>NUXT_BASE_URL=/pc/</p>
<h1>是否开启ssr，填些任意值开启<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E6%98%AF%E5%90%A6%E5%BC%80%E5%90%AFssr-%E5%A1%AB%E4%BA%9B%E4%BB%BB%E6%84%8F%E5%80%BC%E5%BC%80%E5%90%AF"></a></h1>
<p>NUXT_SSR=</p>
<h1>端口号<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E7%AB%AF%E5%8F%A3%E5%8F%B7"></a></h1>
<p>NITRO_PORT=3000</p>
<pre><code>点击打开
* .env.development
开发环境</code></pre>
<h1>请求域名<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E8%AF%B7%E6%B1%82%E5%9F%9F%E5%90%8D"></a></h1>
<p>NUXT_API_URL='输入你的域名'</p>
<pre><code>* .env.production
生产环境</code></pre>
<h1>请求域名<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E8%AF%B7%E6%B1%82%E5%9F%9F%E5%90%8D-1"></a></h1>
<p>NUXT_API_URL='输入你的请求域名' //填空则跟着网站的域名来请求</p>
<pre><code>**以上配置完成后可运行下面命令**
### PC端开发模式
* 运行开发环境
终端中运行命令
```shell
yarn dev</code></pre>
<h3>PC端生产模式（打包）<a href="https://doc.chatmoney.cn/pro/develop/web.html#pc%E7%AB%AF%E7%94%9F%E4%BA%A7%E6%A8%A1%E5%BC%8F-%E6%89%93%E5%8C%85"></a></h3>
<p>打包前修改接口请求域名，打开<code>.env.production</code>，修改<code>NUXT_API_URL</code>变量的值为项目安装部署的服务端地址</p>
<ul>
<li>运行生产环境（非seo）<br />
终端中运行命令</li>
</ul>
<p>shell</p>
<pre><code>yarn build</code></pre>
<p>注意</p>
<p>如果是非seo模式则不需要修改，将<code>NUXT_API_URL</code>留空即可，这样请求接口时会自动读取当前的域名做为接口请求的域名</p>
<ul>
<li>运行生产环境（seo）<br />
打包支持<code>seo模式</code>和非<code>seo模式</code>（类似于vue的单页面应用），默认为<code>非seo</code>模式，修改<code>.env</code>文件可以修改模式</li>
</ul>
<p>.env 文件中</p>
<pre><code> # 是否开启ssr，填些任意值开启，为空则关闭
NUXT_SSR=1</code></pre>
<p>终端中运行命令</p>
<p>shell</p>
<pre><code>yarn build:ssr</code></pre>
<p>注意</p>
<ol>
<li>首先拉取依赖包（拉取之前node版本必须为指定16+版本以上） =><code>yarn install</code></li>
<li>拉取成功无错误时开始执行打包或者运行模式</li>
<li>如果 运行 或者 拉取 时有错误，请先尝试删除yarn.lock文件以及node_modules文件夹以后重复1和2步骤</li>
</ol>
<h3>移动端（uniapp）<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF-uniapp"></a></h3>
<hr />
<p><strong>首次使用先安装<code>yarn install</code>安装前请确保node版本为推荐的16+</strong></p>
<ul>
<li>
<p>复制env文件</p>
<ol>
<li>复制<code>.env.development.example</code>，将复制的文件名修改为<code>.env.developme</code></li>
<li>复制<code>.env.production.example</code>，将复制的文件名修改为<code>.env.production</code></li>
</ol>
</li>
<li>复制以后示例<br />
<img src="https://doc.chatmoney.cn/docs/images/general/develop/web/admin_dev01.png" alt="" /> </li>
</ul>
<p>点击打开</p>
<ul>
<li>
<p>.env.development 开发环境</p>
<p>NODE_ENV = 'development'</p>
<h1>请求域名</h1>
<p>VITE_APP_BASE_URL='输入你的请求域名'</p>
</li>
<li>
<p>.env.production 生产环境</p>
<p>NODE_ENV = 'production'</p>
<h1>请求域名</h1>
<p>VITE_APP_BASE_URL='输入你的请求域名' //填空则跟着网站的域名来请求</p>
</li>
</ul>
<h3>uniapp在VSCode开发<a href="https://doc.chatmoney.cn/pro/develop/web.html#uniapp%E5%9C%A8vscode%E5%BC%80%E5%8F%91"></a></h3>
<hr />
<h4>开发模式<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F"></a></h4>
<ul>
<li>运行h5<br />
终端中运行命令</li>
</ul>
<p>shell</p>
<pre><code>yarn dev:h5</code></pre>
<ul>
<li>运行小程序<br />
终端中运行命令</li>
</ul>
<p>shell</p>
<pre><code>yarn dev:mp-weixin</code></pre>
<p>运行完毕，打开<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html">微信开发者工具</a>，点击左上角菜单<code>项目</code>\><code>导入项目</code>，导入地址选择<code>uniapp/dist/dev/mp-weixin</code>，点击确定成功导入项目</p>
<h4>生产模式<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E7%94%9F%E4%BA%A7%E6%A8%A1%E5%BC%8F"></a></h4>
<ul>
<li>
<p>发行h5</p>
<ol>
<li>终端中运行命令</li>
</ol>
<p>shell</p>
<pre><code>yarn build:h5</code></pre>
<ol>
<li>上传打包好的代码到服务器或仓库</li>
</ol>
</li>
<li>运行小程序<br />
终端中运行命令</li>
</ul>
<p>shell</p>
<pre><code>yarn build:mp-weixin</code></pre>
<p>运行完毕，打开<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html">微信开发者工具</a>，点击左上角菜单<code>项目</code>\><code>导入项目</code>，导入地址选择<code>uniapp/dist/dev/mp-weixin</code>，点击确定成功导入项目</p>
<h3>uniapp在HbuilderX开发<a href="https://doc.chatmoney.cn/pro/develop/web.html#uniapp%E5%9C%A8hbuilderx%E5%BC%80%E5%8F%91"></a></h3>
<hr />
<p>插件推荐安装：在运行过程中会自动安装需要插件</p>
<h4>运行uniapp<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E8%BF%90%E8%A1%8Cuniapp"></a></h4>
<p>注意</p>
<p>apple M系列芯片在uniapp下编译的报错处理：在<code>node_modules</code>下复制粘贴<code>esbuild-darwin-arm64</code>一份，重命名为<code>esbuild-darwin-64</code></p>
<ul>
<li>导入项目，点击HbuilderX左上角菜单<code>文件</code>\><code>导入</code>\><code>从本地目录导入</code>，目录选择<code>uniapp</code></li>
<li>安装依赖，选中当前项目，点击HbuilderX左上角菜单<code>工具</code>\><code>外部命令</code>\><code>npm install</code>安装依赖</li>
<li>运行到h5，点击HbuilderX左上角菜单<code>运行</code>\><code>运行到浏览器</code>\><code>Chrome</code></li>
<li>运行到微信小程序，点击HbuilderX左上角菜单<code>运行</code>\><code>运行到小程序模拟器</code>\><code>微信开发者工具 - (uniapp)</code></li>
</ul>
<p>注意</p>
<ul>
<li>运行到微信小程序前，先配置好小程序的appid，点击<code>uniapp/src/manifest.json</code>，选择<code>微信小程序配置</code>\><code>微信小程序AppID</code>，输入appid即可</li>
<li>一般运行到微信小程序，会自动打开微信开发者工具，如果打开失败，可能是工具的服务端口没有打开，手动打开工具 -> 设置 -> 安全设置，将服务端口开启，也有可能是你配置的小程序appid中，你登录的账号不是这个小程序的开发者，只需要去微信小程序后台将该账号添加到开发者，重新运行即可</li>
</ul>
<h4>发行uniapp<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E5%8F%91%E8%A1%8Cuniapp"></a></h4>
<ul>
<li>发行到h5
<ol>
<li>点击HbuilderX左上角菜单<code>发行</code>\><code>网站-PC Web或手机H5(仅适用于uni-app)</code>，输入网站标题，点击发行按钮，编译完成后可在<code>uniapp/dist/build/h5</code>下</li>
<li>将h5下面的代码复制到发布目录，然后上传代码到服务器或仓库即可</li>
</ol></li>
<li>发行到小程序
<ol>
<li>点击HbuilderX左上角菜单<code>发行</code>\><code>小程序-微信(仅适用于uni-app)</code>，输入<code>小程序名称</code>和<code>小程序appid</code>，点击发行，编译完成后会自动打开微信开发者工具</li>
<li>点击微信开发者工具的<code>上传</code>按钮，将代码上传到微信小程序后台</li>
</ol></li>
</ul>
<h3>后台管理（admin）<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86-admin"></a></h3>
<hr />
<p><strong>首次使用先安装<code>yarn install</code>安装前请确保node版本为推荐的16+</strong></p>
<ul>
<li>
<p>复制env文件</p>
<ol>
<li>复制<code>.env.development.example</code>，将复制的文件名修改为<code>.env.developme</code></li>
<li>复制<code>.env.production.example</code>，将复制的文件名修改为<code>.env.production</code></li>
</ol>
</li>
<li>复制以后示例<br />
<img src="https://doc.chatmoney.cn/docs/images/general/develop/web/admin_dev01.png" alt="" /> </li>
</ul>
<p>点击打开</p>
<ul>
<li>
<p>.env.development 开发环境</p>
<p>NODE_ENV = 'development'</p>
<h1>请求域名</h1>
<p>VITE_APP_BASE_URL='输入你的请求域名'</p>
</li>
<li>
<p>.env.production 生产环境</p>
<p>NODE_ENV = 'production'</p>
<h1>请求域名</h1>
<p>VITE_APP_BASE_URL='输入你的请求域名' //填空则跟着网站的域名来请求</p>
</li>
</ul>
<p><strong>以上配置完成后可运行下面命令</strong></p>
<h3>后台管理开发模式（运行 admin<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F-%E8%BF%90%E8%A1%8C-admin"></a></h3>
<ul>
<li>运行开发环境<br />
终端中运行命令</li>
</ul>
<p>shell</p>
<pre><code>yarn dev</code></pre>
<h3>后台管理生产模式（打包 admin<a href="https://doc.chatmoney.cn/pro/develop/web.html#%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%94%9F%E4%BA%A7%E6%A8%A1%E5%BC%8F-%E6%89%93%E5%8C%85-admin"></a></h3>
<ul>
<li>运行生产环境<br />
终端中运行命令</li>
</ul>
<p>shell</p>
<pre><code>yarn build</code></pre>
<p>注意</p>
<ol>
<li>首先拉取依赖包（拉取之前node版本必须为指定16+版本以上） =><code>yarn install</code></li>
<li>拉取成功无错误时开始执行打包或者运行模式（yarn build / yarn dev）</li>
<li>如果 运行 或者 拉取 时有错误，请先尝试删除yarn.lock文件以及node_modules文件夹以后重复1和2步骤</li>
</ol>