# 中台系统（vue3 + ant-design + vuex + router）

**Repository Path**: ChuPiJiang/library_vue3_admin

## Basic Information

- **Project Name**: 中台系统（vue3 + ant-design + vuex + router）
- **Description**: 模板仓库、中台系统（vue3 + ant-design + vuex + router）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-08-31
- **Last Updated**: 2025-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Library

## README

# watt-admin

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

babel-plugin-import  固定 @1.13.5 ， 高了有问题    


### 包的依赖分析

vxe-table @4.3.5
xe-utils  @3.5.7   这两个也固定，高了报错

report 命令，已经在 vue-cli-service 中集成，没必要自已再手动去实现。 网上还能搜到很多分析，自已回配置的，实现出来的效果跟自带的一样，浪费时间了。

vue-cli-service的命令行参数

### vue-cli-service serve
Options:

--open 服务器启动时打开浏览器
--copy 将URL复制到服务器启动时的剪贴板
--mode 指定环境模式 (默认: development)
--host host 地址 (default: 0.0.0.0)
--port 端口号 (default: 8080)
--https 使用https (default: false)

### vue-cli-service build
Options:

--mode 指定环境模式 (default: production)
--dest 指定输出目录 (default: dist)
--modern 构建两个版本的 js 包：一个面向支持现代浏览器的原生 ES2015+ 包，以及一个针对其他旧浏览器的包
--no-clean 在构建项目之前不要删除输出目录 (dist)
--report 生成 report.html 分析包
--report-json 生成 report.json 分析包
--watch 监听 修改文件时自动重新打包

# 安装

命令行 进入目录
cd na-demo

安装依赖 (忽略版本号不兼容)
npm i --legacy-peer-deps

```
PS E:\workspace\study\na-demo> npm i --legacy-peer-deps
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated consolidate@0.15.1: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog    
npm WARN deprecated shvl@2.0.3: older versions vulnerable to prototype pollution
npm WARN deprecated vuex-persistedstate@4.1.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

added 1118 packages, and audited 1119 packages in 1m

163 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
PS E:\workspace\study\na-demo>
```

## 启动 

为了让你的项目不会产生跨域问题，启动时直接使用 https 。所以项目中要使用本地域名启动，所以先把本地的hosts 增加一个 

![](https://static.jsvue.cn/cnhnkj/doc/template/readme/A4563742-FA0A-4730-9A4F-376BA9B4F66B.png)

如上图，你应该在本地域名指向 127.0.0.1 不会会报错

```
Error: getaddrinfo ENOTFOUND test.abc.com
```

npm run serve

```
> npm run serve

 DONE  Compiled successfully in 35477ms                                   14:35:13


  App running at:
  - Local:   https://test.abc.com:443/
  - Network: https://test.abc.com:443/

  Note that the development build is not optimized.
  To create a production build, run pnpm run build.
```

## 添加 mock 服务 
development 模式下，我们可以添加 mock 服务，模拟后端接口返回数据。

首先，我们需要安装依赖：
npm i chokidar mockjs -D

根目录下新建 mock 文件夹，并在文件夹下新建 userlist.js 文件，内容如下：
```js
const Mock = require('mockjs')

module.exports = function generateMocks () {
  return {
    'GET /admin/brand/list': Mock.mock({
      code: 0,
      msg: '@string("lower", 0)',
      'data|1-10': [
        {
          distributorId: '@guid',
          distributorName: '@cword(3,6)',
          region: '@city(true)'
        }
      ]
    })
  }
}
```

```shell
function setupMockServer(app) {
  const mockDir = path.join(__dirname, './mock')

  fs.readdirSync(mockDir).forEach(file => {
    let mocks = require(path.join(mockDir, file))

    function reloadMocks() {
      Object.keys(require.cache).forEach((id) => {
        if (id.includes(path.join(mockDir, file))) {
          delete require.cache[id];
        }
      });
      mocks = require(path.join(mockDir, file));
    }

    chokidar.watch(path.join(mockDir, file)).on('all', (event, filePath) => {
      if (event === 'change' || event === 'add') {
        console.log(`Mock file ${filePath} has been ${event}, reloading mock data...`);
        reloadMocks()
      }
    })

    app.use((req, res, next) => {
      const generateMocks = mocks();
      const mockResponse = generateMocks[`${req.method} ${req.path}`];
      if (mockResponse) {
        res.json(mockResponse);
      } else {
        next();
      }
    });
  })
}

// vue.config.js
    ...
    proxy: isProd || process.env.VUE_APP_MOCK ? {} : {
      '/admin': {
        target: 'http://127.0.0.1:7001', // 联调时改成转发地址
        changeOrigin: true,
        secure: false,
      }
    },
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined')
      }
      // 本地开发启用mock
      if (process.env.VUE_APP_MOCK) {
        console.info('本地开发启用 mock 服务...')
        setupMockServer(devServer.app)
      }
      return middlewares
    }
```