使用vue-styleguidist编写公共组件文档

1.创建公共组件项目。 vue create test

注意选择vue2配置，styleguidist与vue3还不兼容，启动styleguidist会报错。

这里有个小tip，配置cli时使用 ↑ ↓键选择，但是要让光标处在你想选择的项的上一行，再按回车。

下面是使用vue3时启动styleguidist报的错

2. 安装styleguidist。 vue add styleguidist

安装成功后会自动生成styleguide.config.js文件，和组件例子。package.json devDependencies会自动添加 vue-cli-plugin-styleguidist。

在文件内添加webpack配置，以便组件文档里的示例可以从接口获取数据。更多配置请参考vue-styleguidist.github.io/Configurati…

3. 添加npm脚本

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build --dest=lib --target=lib --name=common-h5 src/components/index.js",
    "lint": "vue-cli-service lint",
    "doc": "vue-cli-service styleguidist",             // *
    "doc:build": "vue-cli-service styleguidist:build"  // *
  },

4. npm run doc启动styleguidist，默认端口6060

5. 接下来就可编写组件啦。按照规范写上注释就可以在localhost:6060页面看到更新。更多注释请参考vue-styleguidist.github.io/docs/Docume…

这是我写的H5公共组件文档