全日历（FullCalendar）Vue组件安装与使用指南

目录结构及介绍

全日历Vue组件项目通常具有以下基础目录结构：

• node_modules/: 存储项目依赖包
• src/: 应用源代码的主要目录，包含组件、样式等资源。
  • components/: 包含自定义或复用的Vue组件。
  • styles/: CSS/SASS/LESS等样式表。
  • App.vue: 主入口文件，包含应用的基本结构和布局。
  • main.js: webpack打包入口点。
• .gitignore: Git忽略规则列表
• package.json: 项目元数据和NPM脚本的描述文件。

项目的启动文件介绍

在全Vue框架中，主要的启动文件是main.js（对于Webpack配置项目）或者index.js（Vite配置项目）。这个文件是项目构建过程中的入口点，在这里导入了核心模块和插件如：

// main.js 或 index.js
import { createApp } from 'vue'
import App from './App.vue'

// 导入并注册全日历Vue组件
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

const app = createApp(App)
app.use(FullCalendar)

app.config.globalProperties.$filters = {
  // 自定义过滤器可以在其他组件中通过 this.$filters 使用
}

app.mount('#app')

App.vue 是应用程序的顶层组件，它将负责渲染和控制整个UI。App.vue 中可能包含一个 <div id='app'> 的根元素，该元素将会被mount到实际的HTML页面上的同名ID元素上。

项目的配置文件介绍

全日历Vue组件自身不需要独立的配置文件，因为它的工作方式主要是通过传递选项对象给 <FullCalendar> 组件的方式进行配置。然而，如果你使用了如WebPack或Vite这样的构建工具，它们会有各自的配置文件，比如 webpack.config.js 和 vite.config.ts。

Webpack 配置文件 (webpack.config.js)

module.exports = {
  mode: 'development', // 开发模式或生产模式
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  devServer: {
    hot: true,
    host: 'localhost',
    port: 8080,
    open: true
  }
}

Vite 配置文件 (vite.config.ts)

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: {
      overlay: false
    },
    port: 3000,
    strictPort: true
  }
});

这些配置文件帮助设置开发服务器、编译和打包应用程序的过程，确保所有使用的JS和CSS文件正确地加载并且全Vue组件能够正常工作。