2、安装
# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage
打开浏览器，输入：([http://localhost:80]) 默认账户/密码 admin/admin123）
3、baseURL位置
开发环境的baseURL：项目根目录下.env.development文件
生产环境的baseURL：项目根目录下.env.production文件
4、前端项目结构
├── build // 构建相关
├── bin // 执行脚本
├── public // 公共文件
│ ├── favicon.ico // favicon图标
│ └── index.html // html模板
│ └── robots.txt // 反爬虫
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── layout // 布局
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ ├── permission.js // 权限管理
│ └── settings.js // 系统配置
├── .editorconfig // 编码格式
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── .env.staging // 测试环境配置
├── .eslintignore // 忽略语法检查
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── babel.config.js // babel.config.js
├── package.json // package.json
└── vue.config.js // vue.config.js
5、#富文本编辑器文件上传
富文本控件采用的summernote，图片上传处理需要设置callbacks函数
$('.summernote').summernote({
height : '220px',
lang : 'zh-CN',
callbacks: {
onImageUpload: function(files, editor, $editable) {
var formData = new FormData();
formData.append("file", files[0]);
$.ajax({
type: "POST",
url: ctx + "common/upload",
data: data,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(result) {
if (result.code == web_status.SUCCESS) {
$(obj).summernote('editor.insertImage', result.url, result.fileName);
} else {
$.modal.alertError(result.msg);
}
},
error: function(error) {
$.modal.alertWarning("图片上传失败。");
}
});
}
}
});
6、跨域代理配置
项目根目录vue.config.js文件
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
7、tips弹窗
$.modal.msg("默认反馈");
$.modal.msgError("错误反馈");
$.modal.msgSuccess("成功反馈");
$.modal.msgWarning("警告反馈");
8、代码生成
1、导入数据表
2、编辑数据表参数（必填、数据字段类型、以及查询条件等等）
3、代码生成
在当前页面修改当前表的数据配置信息（是否可编辑、列表是否展示、查询条件是否可查、添加是否为必填、字段类型等等）
扫描二维码关注公众号，回复：
13653447 查看本文章
当前数据表编辑完成后、即可代码预览、生成
将前端的两个文件按照ruoyi的规则复制到指定的文件目录即可完成
index.vue : 在views目录下新建当前菜单名称一样的文件夹、将该文件拷贝进去
api.js：在api文件夹下新建当前菜单名称一样的文件夹、将该文件拷贝进去、并改名问index.js