UniMaxV5 系列开发培训 - 环境搭建

UniMax MESV5 产品使用最新前端 VUE 技术,立足为客户带来全新的系统体验。顺应发展大潮流,聚焦“强交互、易操作、重美观”,UniMax MESV5 相对 UniMax MES V4.5 在 UI 上进行了整体包装和升级,主要优势体现在:

主流 VUE 技术,美化 UI、提升系统易用性

前后端分离,降低软件设计耦合度、提高系统复杂业务的处理能力

三端统一,降低学习成本,提升开发效率

V5&V4.5 UI 对比
image.png
image.png

image.png

  

前端环境搭建

●1.环境准备

工具准备

IDE

VSCode

nodejs

可以在该网址下载对应的 nodejs:http://nodejs.cn/download/

前端代码管理工具

Git

●2.安装工具

安装 VSCode

1. 点击下载好的 VSCode 安装文件进入到 VSCode 的安装向导界面,如下图直接默认点击下一步,如下图:

null

2. 勾选【我接受协议】,继续点击下一步,如下图:
image.png

3. 选择 VSCode 软件安装位置,这个位置可以任意选择,如下图:
image.png

4. 创建开始菜单文件夹,这里默认然后继续点击下一步,如下图:
image.png

5. 选择在进行软件安装的时候要进行其他的任务,这里选择【添加到 PATH(重启生效)】这个选项,然后继续点击下一步,如下图:

null

6. 确认安装步骤,点击安装开始安装,如下图:

null

7. 安装进度显示如下图

image.png

8. 安装成功之后的提示,如下图
image.png

9. 安装结束之后会默认打开 VSCode,打开 VSCode 软件界面如下图所示:

null

安装 Nodejs

1. 双击下载后的安装包,如下所示:
image.png

2. 点击以上的 Run(运行),将出现如下界面:

null

3. 勾选接受协议选项,点击 next(下一步) 按钮 :

image.png

4.Node.js 默认安装目录为 "C:\Program Files\nodejs" , 可以修改目录,并点击 next(下一步):

image.png

5. 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步)【可以直接下一步】:

null

6. 点击 Install(安装) 开始安装 Node.js。你也可以点击 Back(返回)来修改先前的配置。然后并点击 next(下一步):
null

安装过程:

image.png

点击 Finish(完成)按钮退出安装向导。

image.png

检测 PATH 环境变量是否配置了 Node.js,点击开始 =》运行 =》输入 "cmd" => 输入命令 "path",输出如下结果:

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;

C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;

c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;

C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs;

C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了 C:\Program Files\nodejs\

检查 Node.js 版本

null

点击 Finish(完成)按钮退出安装向导。

安装 Git

1. 使用许可声明,点击“Next”进入下图页面。

null

2. 选择安装路径,在输入框内输入想要安装到的本机路径,也就是实际文件夹位置,或点击“Browse…”选择已经存在的文件夹,然后点击“Next”按钮继续

image.png

3. 选择安装组件,红框内的选项是默认勾选的,建议不要动。绿色框 1 是决定是否在桌面创建快捷方式的。绿色框 2 是决定在所有控制台窗口中使用 TrueType 字体和是否每天检查 Git 是否有 Windows 更新的。这些根据自己需要选择,选择好后,点击“Next”按钮
image.png

4. 这个界面是创建开始菜单中的名称,不需要修改,直接点“Next”按钮继续到下图的界面

null

5. 页面是在选择 Git 文件默认的编辑器,很少用到,所以默认 Vim 即可,直接点“Next”按钮继续到下图的界面

null

6. 这个界面是调整 PATH 环境。

第一种配置是“仅从 Git Bash 使用 Git”。这是最安全的选择,因为你的 PATH 根本不会被修改。只能使用 Git Bash 的 Git 命令行工具。但是这将不能通过第三方软件使用。

第二种配置是“从命令行以及第三方软件进行 Git”。该选项被认为是安全的,因为它仅向 PATH 添加了一些最小的 Git 包装器,以避免使用可选的 Unix 工具造成环境混乱。
你将能够从 Git Bash,命令提示符和 Windows PowerShell 以及在 PATH 中寻找 Git 的任何第三方软件中使用 Git。这也是推荐的选项。

第三种配置是“从命令提示符使用 Git 和可选的 Unix 工具”。警告:这将覆盖 Windows 工具,如 “ find 和 sort ”。只有在了解其含义后才使用此选项。

建议第二种配置,点击“Next”按钮继续到下图的界面:

image.png

7. 选择 HTTPS 后端传输

第一个选项是“使用 OpenSSL 库”。服务器证书将使用 ca-bundle.crt 文件进行验证。这也是我们常用的选项。

第二个选项是“使用本地 Windows 安全通道库”。服务器证书将使用 Windows 证书存储验证。此选项还允许您使用公司的内部根 CA 证书,例如通过 Active Directory Domain Services 。

建议选择第一项,点击“Next”按钮继续到下图的界面

image.png

8. 配置行尾符号转换。

第一个选项是“签出 Windows 风格,提交 Unix 风格的行尾”。签出文本文件时,Git 会将 LF 转换为 CRLF。提交文本文件时,CRLF 将转换为 LF。对于跨平台项目,这是 Windows 上的推荐设置(“ core.autocrlf”设置为“ true”)

第二个选项是“按原样签出,提交 Unix 样式的行尾”。签出文本文件时,Git 不会执行任何转换。提交文本文件时,CRLF 将转换为 LF。对于跨平台项目,这是 Unix 上的建议设置(“ core.autocrlf”设置为“ input”)

第三种选项是“按原样签出,按原样提交”。当签出或提交文本文件时,Git 不会执行任何转换。不建议跨平台项目选择此选项(“ core.autocrlf”设置为“ false”)

建议选择第一种选项,点击“Next”按钮继续到下图的界面:

null

9. 配置终端模拟器以与 Git Bash 一起使用。

第一个选项是“使用 MinTTY(MSYS2 的默认终端)”。Git Bash 将使用 MinTTY 作为终端模拟器,该模拟器具有可调整大小的窗口,非矩形选择和 Unicode 字体。Windows 控制台程序(例如交互式 Python)必须通过“ winpty”启动才能在 MinTTY 中运行。

第二个选项是“使用 Windows 的默认控制台窗口”。Git 将使用 Windows 的默认控制台窗口(“cmd.exe”),该窗口可以与 Win32 控制台程序(如交互式 Python 或 node.js)一起使用,但默认的回滚非常有限,需要配置为使用 unicode 字体以正确显示非 ASCII 字符,并且在 Windows 10 之前,其窗口不能自由调整大小,并且只允许矩形文本选择。

默认第一种选项,点击“Next”按钮继续到下图的界面

null

10. 配置额外的选项。

第一个选项是“启用文件系统缓存”。文件系统数据将被批量读取并缓存在内存中用于某些操作(“core.fscache”设置为“true”)。这提供了显著的性能提升。

第二个选项是“启用 Git 凭证管理器”。Windows 的 Git 凭证管理器为 Windows 提供安全的 Git 凭证存储,最显着的是对 Visual Studio Team Services 和 GitHub 的多因素身份验证支持。(需要.NET Framework v4.5.1 或更高版本)。

第三个选项是“启用符号链接”。启用符号链接(需要 SeCreateSymbolicLink 权限)。请注意,现有存储库不受此设置的影响。

默认第一、第二选项,点击“Next”按钮继续到下图的界面:

null

11. 配置实验选项。

启用实验性的内置添加 -i / -p。(新!)使用实验性的内置交互式 add(“ git add -i”或“ git add -p”)。这使其速度更快(尤其是启动!),但尚未被认为是可靠的。

默认不勾选,直接点击“Next”按钮继续到下图的安装进度界面:

null

12. 安装进度结束之后,会出现下图的完成 Git 安装向导界面:

null

13. 安装完成,可以勾选是否启动启动 Git Bash 和是否查看发行说明,然后点“Finish”按钮退出安装界面

null

14. 启动测试

到此,Git 的安装完成,可以在开始菜单中看到 Git 的三个启动图标(Git Bash、Git CMD(Deprecated)、Git GUI)。

Git Bash,是 Git 配套的一个控制台,点击打开如下图:

null

●3.下载前端代码

1. 在磁盘上新建一个放置代码的文件,点击鼠标右键,选择” Git Bash Here”

null

2. 进行基础配置,作为 git 的基础配置,作用是告诉 git 你是谁,你输入的信息将出现在你创建的提交中,使用下面两条命令:

  git config –global user.name “你的名字或昵称”

  git config –global user.email “你的邮箱”

3. 在 gitspace 文件夹中执行下面命令,完成初始化

  git init

4. 如果你想克隆,只需要执行命令

  git clone < 项目地址 >

image.png

●4.搭建前端环境

1. 启动 VScode,点击“File->Open Folder-> 选择下载好的代码”

2. 下载 node_modules

点击“view->output”

安装依赖(优先使用)

npm install

安装依赖(下载较慢时使用)

npm install –registry=https://registry.npm.taobao.org

#上述 2 种【安装依赖】无法正常时,请尝试删除 node_modules 文件夹后,使用 cnpm 安装

**# **第一步

npm install -g cnpm –registry=https://registry.npm.taobao.org

**# **第二步

cnpm install

**# **启动服务

npm run dev

U5 开发搭建文档.pdf