快速上手

基本信息

Tjcds是一个基于**Ant Design Vue**且封装了如表单/表格/布局等通用组件的快速开发框架

如何使用

Tjcds的引用和大部分Vue组件库并无差别，使用上包括完整引入与局部导入

基于vue-cli3建立一个工程

vue create app

导入组件库

npm i --save tjcds-front-common

引用组件，修改main.js文件

完整引入 如果用户配置了axios插件，组件库会将其注册为vue的原型链，可通过this.axios或this.$http访问

import Vue from 'vue'
import Antd from 'ant-design-vue'
import Tjcds from 'tjcds-front-common'
import App from './App'
import axios from 'axios'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
// FuncTable组件 需要axios插件支持
Vue.use(Tjcds, { axios, Antd })

/* eslint-disable no-new */
new Vue({
  render: h => h(App),
}).$mount('#app')

局部导入 注意局部导入需要自行引入Ant Design Vue

import Vue from 'vue'
import { FormList, FuncTable } from 'tjcds-front-common'
import axios from 'axios'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)
Vue.use(FormList)
// FuncTable组件 需要axios插件支持
Vue.use(FuncTable, axios)

/* eslint-disable no-new */
new Vue({
  render: h => h(App),
}).$mount('#app')

使用组件

修改App.vue在<temaplte></template>添加<icon-picker/>

运行项目

# 启动开发环境
npm run serve

如果出线了图标选择器即代表组件库引用成功

打包部署

# 打包静态文件
npm run build