环境搭建

大约 3 分钟

环境搭建

基础环境

NODEJS>= 8.x.x  (推荐8.17.0版本)
VSCODE (推荐1.27.0版本)
npm 私服 http://10.0.32.98:9873

安装框架

安装开发环境前请确保安装编辑器 VSCODE 及安装插件 VSCODE插件

克隆开发框架源码

项目业务代码需要基于前端开发平台框架基础上开发:

注意

  1. 确保在gitlabopen in new window上注册并已经正确配置本机git key
  2. 并联系代码仓库管理员配置访问权限,否则您将无法正确克隆开发平台代码。
  3. 全局安装 yarn
# 克隆前端开发平台框架源码
git clone git@10.0.33.159:frontend/asp-dev-system.git

项目运行环境

前端开发环境资源包下载

提示

搭建运行环境前,请确保已经将得到以下环境包:

  1. 开发环境 node_modules-aspdev.zip 压缩包
  2. Symlink Creator 1.1.1.3.exe 软连接创建工具
  3. VSCodeUserSetup-x64-1.27.2.exe 前端开发工具
  4. 已经提前在 gitlab 上建立好业务系统的空仓库

删除开发框架远程仓库地址

# 删除远程仓库地址
git remote rm origin

上传源码至项目仓库

#上传源码
git remote add origin 项目git仓库地址

解压node_modules

解压 node_modules-aspdev.zip 至项目源码目录

自动配置开发环境

在克隆后的源码根目录执行命令

# 自动配置开发环境
yarn run auto:env

手动配置

可能受不同操作系统影响,自动配置无法正常使用,这时需要我们手动进行配置开发环境

待补充

打包调试

  1. 开发环境
# 开发调试
yarn run dev

启动完成后会自动打开浏览器访问 http://localhost:8085open in new window

  1. 预发布环境
# 打包代码为预发布环境
yarn run build:stage
  1. 生产环境
# 打包代码为正式上线环境代码
yarn run build:prod

项目基础配置

基础配置

@/settings.js 文件中配置项目基本信息

module.exports = {
  title: '业务系统名称',  // 业务系统名称
  showSettings: false,  // 是否展示系统布局配置
  tagsView: true,  // 是否显示 tagsView
  fixedHeader: false, // 是否固定头部
  sidebarLogo: true, //是否显示侧边栏logo
}

替换 @/assets/logo/logo.png 文件,注意文件格式为png

接口地址

项目根目录存在 .env.development.env.production.env.staging 文件分别代表开发生产预发布环境配置文件

修改文件内 VUE_APP_BASE_API 可以修改后端接口地址

# ASP开发子系统/开发环境,后端接口配置
# http://10.0.37.14:2020/asp 替换为 后端目标地址
VUE_APP_BASE_API = 'http://10.0.37.14:2020/asp'  

框架更新

前端框架始终有专人进行维护,前端框架会阶段性发布新功能及BUG修复等;

注意

因前端框架以源码形势提供,所以为保证能正常的更新,前端框架中除配置文件外的代码不能修改不能修改不能修改

项目中如想要更新底层框架需要进行以下步骤:

项目开发一般在dev分支,需将代码提交至本地 git 仓库后执行命令:

# 自动更新开发框架
npm run auto:update
# 或使用yarn
yarn run auto:update

项目dev分支会自动合并开发框架最新特性

上次编辑于: