安装

npm

npm i @degon/admin-component-vue3 -S

yarn

yarn add @degon/admin-component-vue3 -S

全部引入

import { area, qiniuToken } from '@/api'
import { createApp } from 'vue'
import App from './App.vue'
import DgAdminComponent from '@degon/admin-component-vue3'
import '@degon/admin-component-vue3/theme-chalk/index.css'

const app = createApp(App)
app.use(DgAdminComponent, {
  qiniuTokenApi: qiniuToken,
  qiniuDomain: import.meta.env.VITE_APP_CDN_DOMAIN,
  areaApi: area,
  baseUrl: import.meta.env.BASE_URL
})

按需引入

1. 安装 babel-plugin-import

npm i babel-plugin-import -D
or
yarn add babel-plugin-import -D

2. 修改配置文件

方式一

// 将 babel.config.js 修改为
{
  'plugins': [
    [
      'import',
      {
        libraryName: '@degon/admin-component-vue3',
        style: (name) => {
          return `@degon/admin-component-vue3/theme-chalk/${name.substr(name.lastIndexOf('/') + 1)}.css`
        }
      },
      'degon-admin-component-vue3'
    ]
  ]
}

方式二

// 将 babel.config.js 修改为
{
  'plugins': [
    [
      'import',
      {
        libraryName: '@degon/admin-component-vue3',
        styleLibraryDirectory: 'theme-chalk',
        style: 'css'
      },
      'degon-admin-component-vue3'
    ]
  ]
}
// vue.config.js 增加
{
  configureWebpack: {
    resolve: {
      extensions: ['.css']
    }
  }
}

3. 使用

import { area, qiniuToken } from '@/api'
import { createApp } from 'vue'
import App from './App.vue'
import { 
  DgTable, 
  DgConfirmButton,
  DgEditDialog,
  DgFlexContainer,
  DgSelect,
  DgSelectRemote,
  DgTimePicker,
  DgAddressPicker,
  DgUpload,
  DgUpload2,
  DgAutoComplete,
  DgRichEditor,
  DgLocPicker,
  DgImportModal,
  DgCustomTableColumns,
} from '@degon/admin-component-vue3'

const app = createApp()
app.use(DgTable)
app.use(DgConfirmButton)
app.use(DgEditDialog)
app.use(DgFlexContainer)
app.use(DgSelect)
app.use(DgSelectRemote)
app.use(DgTimePicker)
app.use(DgAutoComplete)
app.use(DgAddressPicker, {
  areaApi: area
})
app.use(DgUpload, {
  qiniuTokenApi: qiniuToken,
  qiniuDomain: import.meta.env.VITE_APP_CDN_DOMAIN
})
app.use(DgUpload2)
app.use(DgRichEditor, {
  baseUrl: import.meta.env.BASE_URL
})
app.use(DgLocPicker)
app.use(DgImportModal)
app.use(DgCustomTableColumns)