tianfanfan / vue-sfc-cli

组件开发脚手架，开发组件并发布至npm的利器。详情见右边链接👉

vue-sfc-cli

vue-sfc-cli exists to provide the minimal setup necessary to compile a Vue Single File Component (SFC) into a form ready to share via npm.

for detail look at this article

requirement

Node.js 8.x

Usage

npx vue-sfc-cli

# 接下来会有一串的提示，请务必填写
# 推荐kebab-case风格，小写字母，多个单词用-（dash）分隔，如my-component

# 填充完提示后
cd my-component

# to use precommit hook
git init

# install dependencies
yarn

# develop your sfc
yarn dev

# build your sfc
yarn build

# Ready to publish!

docs

You can write *.md files host in docs/ as code example.

When you run yarn dev these markdown files will become live demos.

Every time you add a new *.md file, you should re-run yarn dev to load new *.md file.

dotenv

You might wanna use environment variable while development.

According to best practice, encourage using dotenv to config environment variable.

yarn add dotenv --dev

// styleguide.config.js
const webpack = require('webpack')
const dotenv = require('dotenv')

module.exports = {
  webpackConfig: {
    // ...
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(dotenv.config().parsed)
      })
    ]
  }
}

file-loader

We use file-loader to handle font files by default.

When you use a third-party library that contains font files like Element-UI, you need to install file-loader:

yarn add file-loader -D

Then you can use Element UI without tears 😭.

// styleguide/element.js
import Vue from 'vue'
import Elm from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // <- including font files

Vue.use(Elm)

// styleguide.config.js
module.exports = {
  // ...
  require: [
    './styleguide/element.js'
  ]
}

prettier and precommit hook

the generated scaffold use husky as tool for precommit hook, but it require you has git init first, that's why git init running before yarn