unplugin-vue-markdown 项目教程

1. 项目的目录结构及介绍

unplugin-vue-markdown/
├── src/
│   ├── pages/
│   │   └── xx.md
│   └── components/
│       └── ExampleComponent.vue
├── vite.config.js
├── package.json
└── README.md

• src/：源代码目录，包含页面和组件。
  • pages/：存放Markdown页面文件，如xx.md。
  • components/：存放Vue组件文件，如ExampleComponent.vue。
• vite.config.js：Vite配置文件，用于配置项目构建和插件。
• package.json：项目依赖和脚本配置文件。
• README.md：项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是vite.config.js，它负责配置Vite构建工具和插件。以下是一个基本的配置示例：

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import Markdown from 'unplugin-vue-markdown/vite';

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/],
    }),
    Markdown(),
  ],
});

• Vue插件：用于编译Vue文件和Markdown文件。
• Markdown插件：用于将Markdown文件转换为Vue组件。

3. 项目的配置文件介绍

vite.config.js

vite.config.js是Vite的配置文件，用于配置项目的构建和插件。以下是一个详细的配置示例：

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import Markdown from 'unplugin-vue-markdown/vite';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/],
    }),
    Markdown(),
    Components({
      extensions: ['vue', 'md'],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    }),
  ],
});

• Vue插件：配置Vue文件和Markdown文件的编译。
• Markdown插件：配置Markdown文件转换为Vue组件。
• Components插件：配置组件的自动导入和注册。

package.json

package.json文件包含了项目的依赖和脚本配置。以下是一个示例：

{
  "name": "unplugin-vue-markdown",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "unplugin-vue-markdown": "^1.0.0",
    "unplugin-vue-components": "^1.0.0",
    "vite": "^2.0.0"
  }
}

• scripts：定义了开发、构建和预览的命令。
• dependencies：项目运行时的依赖。
• devDependencies：开发时的依赖。

通过以上配置，你可以轻松地启动和构建unplugin-vue-markdown项目。