YuebonCore快速开发框架YuebonCore快速开发框架
首页
指南
视频教程
  • vue版
  • api接口
gitee
首页
指南
视频教程
  • vue版
  • api接口
gitee
  • 指南
  • 快速了解

    • 快速了解
    • 快速使用
  • 环境部署
    • 部署
    • linux 环境部署
  • 手摸手

    • 业务设计
    • 业务数据层
    • 业务服务层
    • 业务对外 API
  • 后台开发

    • 必要配置
    • 数据库实体
    • 缓存机制
    • 定时任务
    • 数据库操作
    • 多系统切换
    • 接口与版本控制
    • Saas 多租户
  • 前端开发

    • 基础搭建
      • 开发工具及扩展
        • 开发工具
        • 扩展
        • 设置
      • 修改接口访问地址
      • 编译运行
    • 开发规范
    • 模块菜单
    • ESLint
  • 更新日志

    • 更新日志
  • 常见问题

基础搭建

本项目技术栈基于 ES2015+、vue3、vuex、vue-router 、vue-cli 、axios 和 element-plus,在项目目录 VueUI 中,它使用了最新的前端技术栈。

开发工具及扩展

开发工具

我们使用 Visual Studio Code 作为 IDE 开发工具。下地址:https://code.visualstudio.com/

扩展

安装 vscode 后请安装以下扩展:

1、ESLint

2、Vetur

3、Chinese 中文简体

设置

在 vscode 中``文件-首选项-设置打开setting.json`将以下代码粘贴进去:

{
  "editor.fontSize": 22,
  "editor.formatOnPaste": true,
  "eslint.format.enable": true,
  "explorer.confirmDelete": false,
  // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "git.autofetch": true,
  "window.zoomLevel": -1,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
      // #vue组件中html代码格式化样式
    }
  },
  "beautify.config": {
    "brace_style": "collapse,preserve-inline" //解决花括号中换行
  }
}

修改接口访问地址

在目录中 VueUI\src 修改 setting.js 文件中接口访问地址,将地址改为 webapi 项目启动访问地址


 apiHostUrl: 'http://localhost:54678/api/', // 基础接口
 apiSecurityUrl: 'http://localhost:54678/api/Security/', // 权限管理系统接口
 fileUrl: 'http://localhost:54678/', // 文件访问路径
 fileUploadUrl: 'http://localhost:54678/api/Files/Upload'// 文件上传路径

编译运行


#进入目录
 cd VueUI

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

打开浏览器,输入:http://localhost:8085 (默认账户 admin/admin888) 若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功

提示

因为本项目是前后端分离的,所以需要前后端都编译启动好,才能进行访问

# 打包正式环境
npm run build:prod

如遇到问题到Issues反馈

Next
开发规范