# trobl-admin

**Repository Path**: jinzhenzong/trobl-admin

## Basic Information

- **Project Name**: trobl-admin
- **Description**: vue3使用演示平台
- **Primary Language**: JavaScript
- **License**: AFL-3.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-10-25
- **Last Updated**: 2024-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 命令行安装

```shell
npm init vue@latest
<!--配置项大全-->
<!--
    `Project name：项目名称，默认值：vue-project，可输入想要的项目名称，此处不建议中文。
    `Add TypeScript? 是否加入TypeScript组件？默认值：No。
    `Add JSX Support? 是否加入JSX支持？默认值：No。
    `Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
    `Add Pinia for state management? 是否添加Pinia组件来进行状态管理？默认值：No。
    `Add Vitest for Unit testing? 是否添加Vitest来进行单元测试？默认值：No。
    `Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试？默认值：No。
    `Add ESLint for code quality? 是否添加ESLint来进行代码质量检查？默认值：No。
-->
```

![安装完成图](./mdimg/image-20221019173631859.png)



# 引入element-plus

```shell
# Yarn
$ yarn add element-plus
```

```javascript
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'element-plus/dist/index.css'

app.use(ElementPlus, { locale: zhCn })
```

# 项目开发前的准备

### 新建jsconfig.json，用于配置编译器的路径引导（ps:尚未找到为什么只能定义两级菜单）

```json
{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@base-comp/*": ["src/components/*"]
    },
    "jsx": "preserve"
  },
  "exclude": ["node_modules", "dist", "lib", "docs"],
  "include": ["./src/**/*"]
}

```

### vite.config.js 类似之前的vue.config.js

```javascript
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

const config = {
  base: './',
  plugins: [vue(), vueJsx()],
  server: {
    port: '5140',
    '^/irm-api/': {
      target: 'http://services.cn', // 后台服务器地址
      changeOrigin: true, /* 允许跨域 */
      pathRewrite: { // 后台访问serverPath
        '^/irm-api/': '/irm-api/'
      }
    },
    '/socket.io': {
      target: 'ws://localhost:3000',
      ws: true
    },
    // vite启动后打开的页面地址
    open: '/'
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "@base-comp": fileURLToPath(new URL("./src/components", import.meta.url)),
    },
    // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
    extensions: ['.js', '.jsx', '.json', '.vue']
  },
}
// https://vitejs.dev/config/
export default defineConfig(config)

```

### main.js优化

```javascript
import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import "./assets/css/main.scss";

import UI from '@/core/install_ui'

const app = createApp(App);

app
  .use(createPinia())
  .use(router)
  .use(UI)
  .mount("#app")

app.config.errorHandler = (err, instance, info) => {
  /** 方法库后期封装 */
  console.error('全局拦截-报错信息：', err)
  console.error('全局拦截-报错信息：', instance)
  console.error('全局拦截-报错类型：', info)
}

```

core/install_ui.js

```
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'element-plus/dist/index.css'
import * as ElIconList from '@element-plus/icons-vue'

const UI = {
  install (app) {
    app.use(ElementPlus, { locale: zhCn })
    for (const name in ElIconList) {
      app.component(name, ElIconList[name])
    }
  }
}
export default UI
```




### prettierrc

```
{
    // tab缩进大小,默认为2
    "tabWidth": 4,
    // 使用tab缩进，默认false
    "useTabs": false,
    // 使用分号, 默认true
    "semi": false,
    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "singleQuote": false,
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    "TrailingCooma": "all",
    // 对象中的空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX标签闭合位置 默认false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
}
```


FIXME: 2023.04.13 国际化目前为初版，计划还要搞：
3、通过菜单配置、请求后端拿到国际化文本（可开放本地+后端结合的方式，但不推荐本地使用！因为这样会导致国际化配置杂乱！且不符合开发规范）
5、本地+后端的方式，本地也应当放置于assets目录，保证不参与打包，用于在线上可以修改！
4、改造完毕之后，本地应当不再具有lang文件夹！但我会形成本地化配置的文档！提供改造步骤


FIXME: 2023.04.13 本地目录或许有点多了
1. contants/config有些许重复的意味，但就目前而言，我不打算对其进行处理。
3. types目录有点过于细化了，如果再大一些的话，我会考虑合并一下


# update 2023.05.09 新增mock功能
1. 本地默认不开启mock功能.
2. 可以在* vite.config.ts *中的【plugin】内将 mockDevServerPlugin() 注释打开，打开后将自动走mock功能！