Merge branch 'dev'

Author: levy

README-zh.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.com/FEMessage/vue-sfc-cli.svg?branch=master)](https://travis-ci.com/FEMessage/vue-sfc-cli)
 [![NPM Download](https://img.shields.io/npm/dm/vue-sfc-cli.svg)](https://www.npmjs.com/package/vue-sfc-cli)
-[![NPM Version](https://img.shields.io/npm/v/vue-sfc-cli.svg)](https://www.npmjs.com/package/vue-sfc-cli)
+[![NPM Version](https://badge.fury.io/js/vue-sfc-cli.svg)](https://www.npmjs.com/package/vue-sfc-cli)
 [![NPM License](https://img.shields.io/npm/l/vue-sfc-cli.svg)](https://github.com/FEMessage/vue-sfc-cli/blob/master/LICENSE)
 [![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)
 
@@ -11,6 +11,11 @@
 ## Table Of Contents
 
 - [Links](#links)
+- [注意事项](#注意事项)
+  - [环境需求](#环境需求)
+  - [Prettier and husky](#prettier-and-husky)
+  - [Stylelint](#stylelint)
+  - [Windows](#windows)
 - [使用教程](#使用教程)
   - [快速开始](#快速开始)
   - [参数选项](#参数选项)
@@ -22,14 +27,31 @@
     - [methods](#methods)
   - [引入第三方库](#引入第三方库)
   - [环境变量](#环境变量)
-  - [prettier and husky](#prettier-and-husky)
-  - [注意](#注意)
-- [环境需求](#环境需求)
 
 ## Links
 
 - [知乎文章](https://zhuanlan.zhihu.com/p/72590127)
 
+## 注意事项
+
+### 环境需求
+
+Node.js 8.x
+
+### Prettier and husky
+
+组件模板内置prettier, 可以在提交代码时格式化。
+
+注意的是需要先执行 `git init` 命令，之后再执行 `yarn` 安装依赖，否则提交钩子不生效。
+
+### Stylelint
+
+组件模板内置stylelint, 对 less/sass 支持友好, 但对 stylus 支持欠佳（不能写注释，否则会出错）
+
+### Windows
+
+不建议在Windows下生成组件, 因为.sh可能没有执行权限。 
+
 ## 使用教程
 
 ### 快速开始
@@ -61,9 +83,7 @@ yarn publish
 
 ### 参数选项
 
-```
--u, --upgrade
-```
+`-u`, `--upgrade`
 
 根据 template目录下模板，生成新的文件，更新到当前组件中。使用的是覆盖策略，默认覆盖的文件定义在 update-files.js。常用于使用最新版本vue-sfc-cli对旧组件的配置进行升级
 
@@ -72,22 +92,30 @@ yarn publish
 npx vue-sfc-cli -u
 ```
 
-`—files`
+`—-files`
 
 如果想更新额外的文件，可以传此选项，后接文件名，多个文件使用 `,` 分隔
 
 ```
 npx vue-sfc-cli -u --files package.json,.babelrc.js
 ```
 
-`—test` 
+`-—test` 
 
 生成一个测试的组件模板，常用于ci环境测试。
 
 ```
 npx vue-sfc-cli --test
 ```
 
+`--name`, `--owner`
+
+以命令形式生成组件，跳过询问过程。它们通常成对出现。
+
+```
+npx vue-sfc-cli --name log-viewer --owner FEMessage
+```
+
 ### 示例文档
 
 在docs目录下，新建 `md` 文件，建议命名同样是kebab-case
@@ -240,17 +268,3 @@ module.exports = {
   }
 }
 ```
-
-### prettier and husky
-
-组件模板内置prettier, 可以在提交代码时格式化。
-
-注意的是需要先执行 `git init` 命令，之后再执行 `yarn` 安装依赖，否则提交钩子不生效。
-
-### 注意
-
-不建议在Windows下生成组件,因为.sh可能没有执行权限。 
-
-## 环境需求
-
-Node.js 8.x

README.md

@@ -2,17 +2,24 @@
 
 [![Build Status](https://badgen.net/travis/FEMessage/vue-sfc-cli/master)](https://travis-ci.com/FEMessage/vue-sfc-cli)
 [![NPM Download](https://badgen.net/npm/dm/vue-sfc-cli)](https://www.npmjs.com/package/vue-sfc-cli)
-[![NPM Version](https://badgen.net/npm/v/vue-sfc-cli)](https://www.npmjs.com/package/vue-sfc-cli)
+[![NPM Version](https://badge.fury.io/js/vue-sfc-cli.svg)](https://www.npmjs.com/package/vue-sfc-cli)
 [![NPM License](https://badgen.net/npm/license/vue-sfc-cli)](https://github.com/FEMessage/vue-sfc-cli/blob/master/LICENSE)
 [![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)
 
 vue-sfc-cli is a powerful tool for developing vue single-file component. 
 
 It makes writing docs and demo easily, integrated with an automated github workflow, and is always ready to publish to npm with best practices.
 
+[中文文档](./README-zh.md)
+
 ## Table Of Contents
 
 - [Links](#links)
+- [Notice](#notice)
+  - [Requirement](#requirement)
+  - [Prettier and husky](#prettier-and-husky)
+  - [Stylelint](#stylelint)
+  - [Windows](#windows)
 - [Tutorial](#tutorial)
   - [Quick Start](#quick-start)
   - [Options](#options)
@@ -24,15 +31,40 @@ It makes writing docs and demo easily, integrated with an automated github workf
     - [Methods](#methods)
   - [Working with third-party library](#working-with-third-party-library)
   - [Environment variable](#environment-variable)
-  - [Prettier and husky](#prettier-and-husky)
-  - [Notice](#notice)
-- [requirement](#requirement)
 - [Contributors](#contributors)
 
 ## Links
 
 - [medium article](https://medium.com/deepexi/reveal-the-secret-of-vue-sfc-cli-69f0f21dbad3)
-- [中文文档](./README-zh.md)
+
+## Notice
+
+### Requirement
+
+Node.js 8.x
+
+### Prettier and husky
+
+The component template has built-in prettier and husky setup that can format code when you commit.
+
+However, you need to execute commands as following, otherwise the commit hook will not take effect:
+
+```sh
+npx vue-sfc-cli
+
+# git init must run before yarn 
+git init
+
+yarn
+```
+
+### Stylelint
+
+The component template has built-in stylelint, which perfectly supports less/sass, but not stylus(it cannot have comment)
+
+### Windows
+
+It is not recommended to generate components under Windows, cause `.sh` files may lost execution permissions.
 
 ## Tutorial
 
@@ -66,9 +98,7 @@ yarn publish
 
 ### Options
 
-```
--u, --upgrade
-```
+`-u`, `--upgrade`
 
 According to the template files in the templates directory, new files will be generated and override the files with same name in current component directory. The default override files is defined in update-files.js. This option often used to upgrade the configuration of old components using the latest version of vue-sfc-cli：
 
@@ -77,22 +107,30 @@ According to the template files in the templates directory, new files will be ge
 npx vue-sfc-cli -u
 ```
 
-`—files`
+`—-files`
 
 If you want to update additional files, you can pass this option, multiple files use `,` to separate
 
 ```
 npx vue-sfc-cli -u --files package.json,.babelrc.js
 ```
 
-`—test`
+`-—test`
 
 Generate a component template for testing, commonly used in CI .
 
 ```
 npx vue-sfc-cli --test
 ```
 
+`--name`, `--owner`
+
+These two arguments are usually used together to generate component without prompt.
+
+```
+npx vue-sfc-cli --name log-viewer --owner FEMessage
+```
+
 ### Writing Example
 
 The docs directory hosts your component's examples. You just write markdown files, and they will turn into demo. It is also recommended to name the markdown files in kebab-case style.
@@ -245,20 +283,6 @@ module.exports = {
 }
 ```
 
-### Prettier and husky
-
-The component template has a built-in prettier and husky setup that can format code when you commit.
-
-However, you need to execute the git init command before running yarn ,otherwise the commit hook will not take effect.
-
-### Notice
-
-It is not recommended to generate components under Windows, as `.sh` files may lost execution permissions.
-
-## requirement
-
-Node.js 8.x
-
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

init.js

@@ -15,7 +15,7 @@ let pkgName = ''
 /**
  * Prompt user for input to populate template files
  */
-let npmName = argv.get('npm')
+let npmName = argv.get('name')
 let ownerName = argv.get('owner')
 const OWNER_NAME = 'FEMessage'
 

templates/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/recommended',
+    'plugin:prettier/recommended',
+    'prettier/vue'
+  ],
+  plugins: ['vue', 'prettier'],
+  rules: {
+    'no-console': [
+      'error',
+      {
+        allow: ['warn', 'error']
+      }
+    ],
+    'no-debugger': 'error',
+    'prettier/prettier': 'error'
+  }
+}

templates/README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://badgen.net/travis/{{ownerName}}/{{componentName}}/master)](https://travis-ci.com/{{ownerName}}/{{componentName}})
 [![NPM Download](https://badgen.net/npm/dm/@{{ownerNameLowerCase}}/{{componentName}})](https://www.npmjs.com/package/@{{ownerNameLowerCase}}/{{componentName}})
-[![NPM Version](https://badgen.net/npm/v/@{{ownerNameLowerCase}}/{{componentName}})](https://www.npmjs.com/package/@{{ownerNameLowerCase}}/{{componentName}})
+[![NPM Version](https://badge.fury.io/js/%40{{ownerNameLowerCase}}%2F{{componentName}}.svg)](https://www.npmjs.com/package/@{{ownerNameLowerCase}}/{{componentName}})
 [![NPM License](https://badgen.net/npm/license/@{{ownerNameLowerCase}}/{{componentName}})](https://github.com/{{ownerName}}/{{componentName}}/blob/master/LICENSE)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/{{ownerName}}/{{componentName}}/pulls)
 [![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)

templates/build/rollup.config.js

@@ -17,7 +17,10 @@ const config = {
     commonjs(),
     vue({
       css: true,
-      compileTemplate: true
+      compileTemplate: true,
+      style: {
+        postcssPlugins: [require('autoprefixer')]
+      }
     }),
     babel({
       runtimeHelpers: true,

templates/package-json

@@ -39,7 +39,12 @@
     "@babel/core": "^7.4.3",
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.5",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^5.2.3",
     "file-loader": "^3.0.1",
     "github-release-notes": "^0.17.0",
     "glob": "^7.1.3",
@@ -69,21 +74,28 @@
   },
   "vue-sfc-cli": "{{cliVersion}}",
   "engines": {
-    "node": ">= 4.0.0",
+    "node": ">= 8.3.0",
     "npm": ">= 3.0.0"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
-      "post-commit": "git update-index --again"
+      "post-commit": "git update-index --again",
+      "pre-push": "yarn test"
     }
   },
   "lint-staged": {
-    "*.(js|md|json)": [
+    "*.@(md|json)": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.js": [
+      "eslint --fix",
       "prettier --write",
       "git add"
     ],
     "*.vue": [
+      "eslint --fix",
       "prettier --write",
       "stylelint --fix",
       "git add"

templates/src/component.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="{{componentName}}">
+  <div class="{{componentName}}" v-bind="$attrs" v-on="$listeners">
     hello
   </div>
 </template>