基础搭建

本项目技术栈基于 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反馈