使用 fz-element-ui #

本节将介绍如何在项目中使用 Fz Element Ui。

环境支持 #

安装 #

1. 使用包管理器 #

# NPM
npm install fz-element-ui

# Yarn
yarn install fz-element-ui

# pnpm
pnpm install fz-element-ui

快速开始 #

1. 完整引入 #

fz-element-ui 将会在Vue应用中进行全局组件注册。

// main.js
import Vue from 'vue'
import FzElementUi from 'fz-element-ui'
import 'fz-element-ui/dist/style.css'

Vue.use(FzElementUi)

2. 按需引入 #

1. 需要在使用组件的地方手动对 fz组件 进行导入。

   <!-- App.vue -->
   <template>
     <fz-table>
       <el-table-column ... />
     </fz-table>
   </template>
   
   <script>
     import { FzTable } from 'fz-element-ui'
     
     export default {
       name: 'App',
       components: { FzTable }
     }
   </script>
   

2. 在全局中进行 fz组件 部分注册

   import Vue from 'vue';
   import { FzTable } from 'fz-element-ui';
   import App from './App.vue';
   
   Vue.component(FzTable.name, FzTable);
   /* 或写为
    * Vue.use(FzTable)
    */
   
   new Vue({
     el: '#app',
     render: h => h(App)
   });
   

注意事项 #