JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 开发手册

  • Vue 开发手册

    • Vue 分离版本介绍
    • 快速开始、安装部署
      • 具备知识
      • 推荐 VSCode 插件
      • 安装启动
      • 后端安装部署
      • 部署到正式服务器
      • NPM 脚本
      • 目录说明
    • 配置参数、主题配置
    • 前端权限、按钮权限
    • BasicForm 表单组件
    • BasicTable 表格组件
    • 源码解析、表单列表
    • 常用组件库、Hooks
    • 图标 Icon Svg 组件
    • 国际化、多语言
    • Less CSS 样式库
    • 引入外部依赖
    • 分离版 ★ 常见问题 ★
  • 扩展功能专题

  • 云服务技术架构

  • 技术服务与支持

JeeSite Vue 快速开始、安装部署、编译打包

# 具备知识

  • VSCode (opens new window) - 推荐 IDE 集成开发工具
  • Node.js 16 (opens new window) 和 git (opens new window) - 开发环境
  • Vite (opens new window) - 熟悉 Vite 特性
  • Vue-v3 (opens new window) - 熟悉 Vue 基础语法
  • TypeScript (opens new window) - 熟悉 TS 基本语法
  • ES6+ (opens new window) - 熟悉 ES6 基本语法
  • Vue-Router-v4 (opens new window) - 熟悉 vue-router 基本使用
  • Vue-Vben-Admin (opens new window) - 熟悉 UI 及表单列表及常用组件使用
  • Ant-Design-Vue (opens new window) - 熟悉 UI 基本使用
  • JeeSite-v5 (opens new window) - 安装后台服务

# 推荐 VSCode 插件

  • Volar (opens new window) - Vue3 开发必备(Vetur禁用)
  • ESLint (opens new window) - 脚本代码检查
  • Prettier (opens new window) - 代码格式化
  • Stylelint (opens new window) - CSS 格式化
  • DotENV (opens new window) - .env 文件高亮
  • I18n-ally (opens new window) - 国际化 i18n 插件
  • Iconify IntelliSense (opens new window) - Iconify 图标插件
  • windicss IntelliSense (opens new window) - WindiCSS 提示插件

# 安装启动

  • 如果没有安装 Node.js 16,下载地址:https://nodejs.org (opens new window)
# 验证
node -v
1
2
  • 如果没有安装 Yarn 执行安装(要求 Yarn v1.x)
npm i -g yarn
# 验证
yarn -v
1
2
3
  • 获取代码
git clone https://gitee.com/thinkgem/jeesite-vue.git
cd jeesite-vue
1
2

注意:不要放到中文或带空格的目录下。

  • 安装依赖
yarn config set registry https://registry.npm.taobao.org
yarn install
1
2
  • 打开 .env.development 文件,修改后台接口:

# 代理设置,可配置多个,不能换行,格式:[访问接口的根路径, 代理地址, 是否保持Host头]
# VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]]
VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]]

# 访问接口的根路径
VITE_GLOB_API_URL = 

# 访问接口的前缀,在根路径之后
VITE_GLOB_API_URL_PREFIX = /js
1
2
3
4
5
6
7
8
9
10
  • 运行访问
yarn serve
1

开发环境会加载文件较多,便于调试,请耐心等待。

编译打包后,会合并这些文件,所以访问性能会大大提高。

# 后端安装部署

https://jeesite.com/docs/install-deploy/

# 部署到正式服务器

打开 .env.production 文件,修改参数:

# 访问项目的根路径
VITE_PUBLIC_PATH = /

# 访问接口的根路径
VITE_GLOB_API_URL = 

# 访问接口的前缀,在根路径之后
VITE_GLOB_API_URL_PREFIX = /js

# 路由模式(true: history、false: hash)
VITE_ROUTE_WEB_HISTORY = true
1
2
3
4
5
6
7
8
9
10
11
  • 执行打包命令
yarn build
1

打包完成后,会在根目录生成 dist 文件夹,发布 nginx。

打包后动态配置:

打开 _app.config.js 文件,用于项目在打包后,需要动态修改配置的需求,如接口地址。不用重新进行打包,可在打包后修改 /dist/_app.config.js 内的变量,刷新即可更新代码内的局部变量。

// _app.config.js
// 变量名命名规则  __PRODUCTION__xxx_CONF__   xxx:为 .env 配置的 VITE_GLOB_APP_SHORT_NAME
window.__PRODUCTION__JEESITE__CONF__ = {
  VITE_GLOB_APP_TITLE: 'JeeSite快速开发平台',
  VITE_GLOB_APP_SHORT_NAME: 'jeesite',
  VITE_GLOB_API_URL: '/js',
  VITE_GLOB_API_URL_PREFIX: '',
  VITE_GLOB_UPLOAD_URL: '/upload',
};
1
2
3
4
5
6
7
8
9

路由 history 模式:

路由如果采用 history 模式 (opens new window),您还需要辅助配置 nginx 如下:

nginx.conf 文件

server {
  # 前端Vue页面
  location / {
      root  /jeesite-vue/dist;
      index  index.html;
      try_files $uri $uri/ /index.html;
  }
  # 如果 VITE_PUBLIC_PATH 设置为 /vue,配置如下:
  #location /vue {
  #    alias  /jeesite-vue/dist;
  #    index  index.html;
  #    try_files $uri $uri/ /vue/index.html;
  #}
  # 后端接口服务
  location /js {
      proxy_pass http://127.0.0.1:8980/js;
      proxy_set_header Host $host:$server_port;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_redirect off;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# NPM 脚本

"scripts": {
  # 安装依赖
  "bootstrap": "yarn install",
  # 运行项目
  "serve": "npm run dev",
  # 运行项目
  "dev": "vite",
  # 构建项目
  "build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
  # 清空缓存后构建项目
  "build:no-cache": "yarn clean:cache && npm run build",
  # 生成打包分析,在 `Mac OS` 电脑上执行完成后会自动打开界面,在 `Window` 电脑上执行完成后需要打开 `./build/.cache/stats.html` 查看
  "report": "cross-env REPORT=true npm run build",
  # 类型检查
  "type:check": "vue-tsc --noEmit --skipLibCheck",
  # 预览打包后的内容(先打包在进行预览)
  "preview": "npm run build && vite preview",
  # 直接预览本地 dist 文件目录
  "preview:dist": "vite preview",
  # 生成 ChangeLog
  "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
  # 删除缓存
  "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
  # 删除 node_modules (`window` 系统手动删除该目录较慢,可以使用该命令来进行删除)
  "clean:lib": "rimraf node_modules",
  # 执行 eslint 校验,并修复部分问题
  "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
  # 执行 prettier 格式化(该命令会对项目所有代码进行 prettier 格式化,请谨慎执行)
  "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
  # 执行 stylelint 格式化
  "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
  "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
  "lint:pretty": "pretty-quick --staged",
  # 对打包结果进行 gzip 测试
  "test:gzip": "http-server dist --cors --gzip -c-1",
  # 对打包目录进行 brotli 测试
  "test:br": "http-server dist --cors --brotli -c-1",
  # 重新安装依赖,见下方说明
  "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
  "install:husky": "is-ci || husky install",
  # 生成图标集,见下方说明
  "gen:icon": "esno ./build/generate/icon/index.ts"
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 目录说明

├── build                打包脚本相关
│   ├── config           配置文件
│   ├── generate         样式生成器
│   ├── script           编译脚本
│   └── vite             vite配置
├── mock                 mock文件夹
├── public               公共静态资源目录
├── src                  源码主目录
│   ├── api              数据接口文件
│   ├── assets           资源文件
│   │   ├── icons        图标文件夹
│   │   ├── images       图片的文件夹
│   │   └── svg          svg图片的文件夹
│   ├── components       公共组件
│   ├── design           样式文件
│   ├── directives       指令
│   ├── enums            枚举/常量
│   ├── hooks            hook
│   │   ├── component    组件相关hook
│   │   ├── core         基础核心hook
│   │   ├── event        事件相关hook
│   │   ├── setting      配置相关hook
│   │   └── web          web相关hook
│   ├── layouts          布局文件
│   │   ├── default      默认布局
│   │   ├── iframe       iframe布局
│   │   └── page         页面布局
│   ├── locales          多语言
│   ├── logics           逻辑
│   ├── App.vue          主页面
│   ├── main.ts          主入口
│   ├── router           路由配置
│   ├── settings                   项目配置
│   │   ├── componentSetting.ts    组件配置
│   │   ├── designSetting.ts       样式配置
│   │   ├── encryptionSetting.ts   加密配置
│   │   ├── localeSetting.ts       多语言配置
│   │   ├── projectSetting.ts      项目配置
│   │   └── siteSetting.ts         站点配置
│   ├── store             本地存储
│   ├── utils             工具类
│   └── views             视图页面
│       ├── bpm           工作流模块
│       ├── sys           系统核心模块
│       └── test          测试功能模块
├── test                  测试
│   └── server            测试用到的服务
│       ├── api           测试服务器
│       ├── upload        测试上传服务器
│       └── websocket     测试ws服务器
├── types                 类型文件
├── .env                  全局属性配置
├── .env.development      开发环境属性配置
├── .env.production       开发环境属性配置
├── package.json          项目信息和依赖配置
├── vite.config.ts        vite配置文件
└── windi.config.ts       windcss配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← Vue 分离版本介绍 配置参数、主题配置→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2023 济南卓源软件有限公司 版权所有 | Theme Vdoing

关注 JeeSite 公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式