preface

This article will reveal the implications of vuE-SFC-CLI, a tool for vUE single file components, and explain how it improves efficiency throughout the component development process.

This article can be seen as a growing piece of NPM best practices for πŸ“¦vue component publishing, a sister to πŸ€–’s build automated Github Workflow, and a hands-on product of team best practices. It’s a bit of background, but it’ll take a little time to digest πŸ€”

Using the tutorial

Quick start

npx vue-sfc-cli

# There will be a list of tips, please be sure to fill in
# Recommend kebab-case style, lowercase letters, multiple words separated by - (dash), such as my-component

# After filling the prompt
cd my-component

Git initialization, so you can use commit hook
git init

# install dependencies
yarn

# Start development
yarn dev

# packaged
yarn build

# Ready to publish!
yarn publish
Copy the code

Parameter options

-u, –upgrade Generates a new file based on the template in the template directory and updates it to the current component. The override policy is used, and the default override file is defined in update-files.js. It is used to upgrade the configurations of old components using the latest version vuE-SFC-CLI

# cd my-component
npx vue-sfc-cli -u
Copy the code

–files If you want to update additional files, you can pass this option, followed by the filename, multiple files used, separated

npx vue-sfc-cli -u --files package.json,.babelrc.js
Copy the code

–test Generates a test component template, often used in CI environment testing.

npx vue-sfc-cli --test
Copy the code

Sample document

In the docs directory, create an MD file and name it kebab-case

Take the example of uploading the upload-to-ali docs/ draggabable

In yarn Dev, the markdown file will be converted to demo, and you can see the actual code and modify it in real time to refresh the demo

The API documentation

In the VUE file, you write comments to generate API documentation.

props

Use multi-line comments in props

slot

On the line above slot, use a comment beginning with @slot

event

Above the EMIT event, use a multi-line comment

methods

Above the method you want to display publicly, use a multi-line comment and add @public

Results the preview

Introducing third-party libraries

Element – the UI, for example

yarn add element-ui
Copy the code

Add a new file: styleGuide /element.js

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
Copy the code

Modify the configuration file styleguide.config.js

The environment variable

If you need to use environment variables, dotenv is recommended

yarn add dotenv --dev
Copy the code

prettier and husky

Prettier is built into component templates, which can be formatted when code is submitted.

Before installing the yarn dependency, run the git init command. Otherwise, the hook submission does not take effect.

Pay attention to

It is not recommended to build components under Windows because. Sh may not have execution permissions.

Technology,

An overview of the technology

  • Vue-styleguidist locally develops demo and generates documentation
    • Jest unit tests
    • Prettier + husky code formatting
    • A rollup packaging
    • Standard-version Automatically generates Changelog
    • Github release-notes Generates github release
    • Auto-badge Automatically adds a label to PR
    • Netlify preview pr
    • Travis CI publishes NPM/Github Pages
    • Shell + DingTalk API sends a pin message after successful publication
    • All-3s show contributors
    • Built-in readme. md templates, including directory structures, back to top, and some common badges

The template directory

The following is the generated default template configuration for the component

β”œ ─ ─. All - contributorsrc # all - contributors configuration β”œ ─ ─ the babelrc β”œ ─ ─ the editorconfig β”œ ─ ─. Making β”‚ β”” ─ ─ badge. Yml # making app Auto - badge configuration, .gitignore β”œβ”€.grenrc.js # github release-Notes Config β”œβ”€.PrettierIgnore # Prettier Config β”œβ”€.prettierrc # Prettier configuration β”œ ─ ─. Travis. Yml # Travis ci configuration β”œ ─ ─ LICENSE # MIT β”œ ─ ─ the README. Md # README β”œ ─ ─ the build # rollup configuration β”‚ β”” ─ ─ .config.js β”œβ”€ build.sh # ci β”œβ”€ dist # Pack Export Directory β”œβ”€ docs # β”‚ β”œβ”€ Basic.md β”œβ”€ notify.sh # ci For nailing inform β”œ ─ ─ package. Json β”œ ─ ─ the SRC # source file directory β”‚ β”œ ─ ─ index. The js β”‚ β”” ─ ─ the upload - to - ali. Vue # single file component β”œ ─ ─ styleguide. Config. Js # Manu-styleguidist configuration file β”œ ─ yarn.lockCopy the code

The development of

The reason for choosing Vue – Styleguidist is the benefit of writing md, both as a document and as a working demo.

The advantage of this is that the documentation and demo are integrated without maintaining two pieces of code at the same time.

Modify MD, modify the source file, Demo is hot reload, very convenient.

test

For component tests, the first thing that comes to mind is the associated toolset vue-test-utils, and then component tests are a little hard to write, or don’t know how to write.

In fact, you can change your mind and start with simple things. For unit testing, it is more important to develop the habit of writing tests, so the initial recommendation is to test pure functions only with JEST.

That is, extract the methods from the component, put them in a separate file, and test them specifically.

The advantage of this is that in order to facilitate testing:

  • When writing components, developers need to write as short and concise functions as possible
    • Functions are written as pure functions, that is, they do not depend on or affect global variables

This approach is also good for stepping in test cases to a component that has no tests at all.

Below is an example of code for el-Data-table to test a pure function

Attached is a related article: βœ… Test driven development using JEST

build

Yarn Build creates three files:

  • upload-to-ali.esm.js
    • upload-to-ali.min.js
    • upload-to-ali.umd.js

When users import components, the default import is upload-to-ali.umd.js. For the descriptions of the three files, πŸ“¦ Vue component publishing NPM best practices have been described and will not be repeated.

One feature of ROLLup is that component dependencies are not packaged together by default, which helps reduce component distribution volume.

Here’s an example:

// src/index.js
const crypto = require('crypto')
const axios = require('axios')
Copy the code

After you run YARN Build, the following information is displayed

Commit specification

Now, before we go on, review Conventional Commits

The key points are as follows, in the format:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
Copy the code

Where

:

is required.

The types of type are:

  • feat: A new feature
    • fix: A bug fix
    • docs: Documentation only changes
    • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
    • refactor: A code change that neither fixes a bug nor adds a feature
    • perf: A code change that improves performance
    • test: Adding missing or correcting existing tests
    • chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

By convention, the update relies on using chore(DEPS), which is also the official github practice

PR Automatically labels

Since the release Notes generated by Github release-Notes are only valid for Pull requests with labels, add a robot to the Github repository that automatically adds labels to avoid duplication of effort.

The process,

.grenrc.js

Grenrc.js is a Github Release Notes configuration that references Nuxt, Github and other popular repositories and is ready to use

badge.yml

.github/badge.yml is an auto-badge configuration file that needs to be hidden in the.github folder. The following configuration corresponds to.grenrc.js above and is also ready to use

Automatic release

TravisΒ CI

The main use of Travis CI for automation is the following.travis. Yml configuration:

For details on the above parameters, please refer to the tutorial: πŸš€Github Integration TravisCI: automatic publishing

The process,

The main process is shown in the figure below:

build.sh

Build. sh contains the following contents:

#! /bin/sh
yarn stdver

yarn build

git remote add github https://$GITHUB_TOKEN@github.com/FEMessage/upload-to-ali.git > /dev/null 2>&1
git push github HEAD:master --follow-tags
Copy the code

In package.json, sciPTS should have the following fields:

"stdver": "standard-version -m '[skip ci] chore(release): v%s'",
"release": "gren release --override"
Copy the code

The notify.sh content is as follows:

#! /bin/sh
if [ "$TRAVIS_TEST_RESULT"! ="0" ]
then
echo "build not success, bye"
exit 1
fi

url=https://api.github.com/repos/FEMessage/upload-to-ali/releases/latest
resp_tmp_file=resp.tmp

curl -H "Authorization: token $GITHUB_TOKEN" $url > $resp_tmp_file

html_url=`cat $resp_tmp_file | sed -n 5p | sed 's/\"html_url\"://g' | awk -F '"' '{print $2}'`
body=`cat $resp_tmp_file | grep body | sed 's/\"body\"://g; s/\"//g'`

msg='{" msgtype ":" the markdown ", "markdown" : {" title ":" the upload - to - ali update ", "text" : "@ all \ n# [upload - to - ali] ('$html_url')\n'$body'"}}'

curl -X POST https://oapi.dingtalk.com/robot/send\?access_token\=$DINGTALK_ROBOT_TOKEN -H 'Content-Type: application/json' -d "$msg"

rm $resp_tmp_file
Copy the code

There are two key points:

  • Build failed, no message sent
    • When calling the Github API to obtain the latest release, bring the Github token

README.md

After looking at good open source projects, we found a readme. md template that was built into the initialization project

There is also a common badge

And contributors

The official documentation

conclusion

Finally, welcome to github.com/FEMessage/v… Develop vUE components ~