For more articles, please follow my personal blog: https://seven777777.github.io/myblog/
Storybook is an open source UI development tool that can effectively visualize project components, facilitate component reuse, and avoid reinventing the wheel.
I just came across this tool recently and found it very interesting, so I decided to write a demo to practice it. I have created an example warehouse about echarts before . If I had come into contact with storybook earlier, I might have used this method to implement it. I might consider refactoring it if I have the opportunity later.
Because most of the current working technology stacks revolve around Vue, the records here are for storybook for vue.
Create vue project file
1. First make sure that vue has been installed in your environment. You can vue -Versionconfirm by
➜ / vue -Version
@vue/cli 4.5.9
Next, initialize the vue project first, and execute the following command in the folder path where you store the code:
vue create storybook
The creation process is the construction step of normal vue project scaffolding.
Problems encountered
It may be that the computer was updated a while ago. Anyway, when the project was built, the following error was reported:
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:182:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
gyp ERR! System Darwin 20.2.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/seven/sevenCode/storybook/node_modules/watchpack-chokidar2/node_modules/fsevents
gyp ERR! node -v v10.13.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
I tried many methods on the Internet but to no avail. Finally, I successfully solved the problem through the following steps:
- Enter the installation path
xcode-select --print-pathto viewcommand-line tools, the results are as follows:
➜ sevenCode git:(master) ✗ xcode-select --print-path
/Library/Developer/CommandLineTools
-
Remove the input from
sudo rm -r -f /Library/Developer/CommandLineToolsthe systemcommand-line toolsAfter step 2, an installation prompt will appear. Follow the instructions to install it.
-
Enter
xcode-select --installreinstall. It may have already been installed in step 2. At this time, enter the installation command again. The prompt is as follows:
➜ sevenCode xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updates
Don't worry about it, just delete node_modulesit and re-execute it npm installto install normally without the error just now.
Reference address: https://www.jianshu.com/p/828de2cb9855
Install storybook
npx -p @storybook/cli sb init --type vue
The installation can be completed through the official automatic installation command.
After the installation is complete, the default file structure is as follows:
Preview storybook
npm run storybook
Preview address after success: http://localhost:6006/
There are many tutorials on manual installation on the Internet. If you are interested, you can check them out by yourself. Here we only introduce the automatic generation steps.
This article: Vue + Storybook implements component-driven development is quite clear, you can refer to it.
