📦 hellosean1025 / ydoc-plugin-vue-styleguide

将vue-styleguide 集成到 ydoc

1 stars 1 forks 👁 1 watching
📥 Clone https://github.com/hellosean1025/ydoc-plugin-vue-styleguide.git
HTTPS git clone https://github.com/hellosean1025/ydoc-plugin-vue-styleguide.git
SSH git clone git@github.com:hellosean1025/ydoc-plugin-vue-styleguide.git
CLI gh repo clone hellosean1025/ydoc-plugin-vue-styleguide
suwenxiong suwenxiong docs 0a1f6c5 7 years ago 📝 History
📂 master View all commits →
📁 bin
📄 .gitignore
📄 index.js
📄 README.md
📄 README.md

ydoc-plugin-vue-styleguide

根据代码结构和注释,生成 vue 组件文档,基于 vue-styleguide

快速开始

1.在项目目录下 install 插件:

npm install ydoc-plugin-vue-styleguide

2.在项目根目录 ydoc.js 中配置插件参数:

module.exports = {
  plugins: ['vue-styleguide'],
  pluginsConfig: {
    "vue-styleguide": {
      'vue-styleguide': vueStyleguideOptions
  }
}
vueStyleguideOptions 配置请查看官方文档

3.在导航添加链接

打开 docs/NAV.md,添加以下markdown:

* [组件](/vue-components/index.html)

Example

const webpackConfig = {
  devtool: 'inline-source-map',
  resolve:{
    extensions: ['.js', '.vue']
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: ['vue-loader'],
      },
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use:   ['style-loader','css-loader'],
      },
      {
        test: /\.scss|sass$/,
        use: ['style-loader','css-loader','sass-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'static/image/[name].[hash].[ext]',
            },
          },
        ],
      },
      {
        test: /\.mp3$/,
        use: [
          {
            loader: 'url-loader',
            query: {
              limit: 1,
              name: 'static/voice/[name].[hash].[ext]',
            },
          },
        ],
      },
    ],
  },
}

module.exports = {
  plugins: ['vue-styleguide'],
  pluginsConfig: {
    "vue-styleguide": {
      'vue-styleguide': {
      components: './components/**/index.vue', //组件文档路径
      //webpack配置
      webpackConfig 
    }
  }
}