# 前端配置
添加依赖（**使用npm**）：

```bash
npm i element-ui \
    @d2-projects/d2-crud \
    vue-cheetah-grid \
    @d2-projects/vue-table-export \
    @d2-projects/vue-table-import \
    github-markdown-css \
    marked@^2.0.0 \
    jschardet -S
```

添加依赖（**使用yarn**）：
```bash
yarn add element-ui \
    @d2-projects/d2-crud \
    vue-cheetah-grid \
    @d2-projects/vue-table-export \
    @d2-projects/vue-table-import \
    github-markdown-css \
    marked@^2.0.0 \
    jschardet
```

需要在`main.js`中增加（全局引入组件）：

```js
// D2-Crud
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from '@d2-projects/d2-crud'
// Cheetah-Grid
import vueCheetahGrid from 'vue-cheetah-grid'
// 表格导出插件
import pluginExport from '@d2-projects/vue-table-export'
import pluginImport from '@d2-projects/vue-table-import'

Vue.use(ElementUI)
Vue.use(D2Crud)
Vue.use(vueCheetahGrid)
Vue.use(pluginExport)
Vue.use(pluginImport)
```

*（可选）* 在`package.json`里更改`element-ui`版本：

```json
"element-ui": ">2.15.9 || 2.15.8",
```

`2.15.9`有一个小[bug](https://github.com/ElemeFE/element/issues/21941)，会导致性能下降。

此外请参照目录结构中注释进行代码合并：

```pre
📦src
 ┣ 📂api
 ┃ ┣ 📂modules
 ┃ ┃ ┣ 📜scada.configure.api.js  # 增添Axios请求
 ┃ ┃ ┗ 📜sys.user.api.js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜service.js
 ┃ ┗ 📜tools.js
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂d2-markdown  # 渲染markdown所需组件（在D2Admin的基础上精简了功能）
 ┃ ┃ ┗ 📜index.vue
 ┃ ┗ 📜index.js  # 在此处注册d2-markdown
 ┣ 📂libs
 ┣ 📂locales
 ┣ 📂menu
 ┃ ┗ 📜index.js  # 增添菜单
 ┣ 📂plugin
 ┣ 📂router
 ┃ ┣ 📜index.js
 ┃ ┗ 📜routes.js  # 增添路由
 ┣ 📂store
 ┣ 📂views
 ┃ ┣ 📂scada  # 增添页面
 ┃ ┃ ┣ 📂scadaConfigure
 ┃ ┃ ┃ ┗ 📜index.vue
 ┃ ┃ ┗ 📂scadaQuery
 ┃ ┃ ┃ ┗ 📜index.vue
 ┃ ┗ 📂system
 ┣ 📜App.vue
 ┣ 📜i18n.js
 ┣ 📜main.js
 ┗ 📜setting.js
```