作为样板项目存储库的工作解决方案
在过去的几个月中,我一直在配置Vue的Storybook时遇到问题,但是我已经解决了这些问题,并在此分享一个具有您特定要求和一些额外功能的工作样板项目存储库。
对于这个问题提供的赏金要求一个最新的解决方案。然而,最新的Storybook版本5.2和5.3,仅在几天前进入beta版,有两种新的故事语法格式即将推出:组件故事格式(CSF)和MDX语法。
Storybook 5.3终于为这些格式带来了多框架支持,以及长期期待的Storybook Docs插件的首次发布。
然而,作为选择加入的格式/功能,它们目前尚未在存储库中进行配置。如果需要,我可以提供单独分支的其他设置。
这里是使用Tailwind CSS的Storybook 5.3预发布beta版本的样板项目存储库。
该项目配置了Vue CLI 4和TypeScript,以及Composition API函数组件格式,为即将到来的Vue 3.0版本(目标发布时间为2020年第一季度末)做好了未来准备。
关于PostCSS和导入样式的注意事项
问题设置中的主要问题在于PostCSS不是一种语言,而是一种用JavaScript转换CSS的工具,而Vue CLI已经在内部使用PostCSS进行了配置。
此外,问题和之前的答案中缺少的是,样式不仅需要在应用程序的main.js
/main.ts
文件中导入,还需要在Storybooks的主要config.js
文件中导入。
初始设置步骤
vue --version
npm uninstall -g @vue/cli
yarn global remove @vue/cli
npm install -g @vue/cli
vue create boilerplate-ts-vue-storybook-tailwind-postcss --packageManager npm
◉ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
◯ E2E Testing
Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
cd boilerplate-typescript-vue-storybook-tailwind-postcss
npm install -D git+https://git@github.com/ux-engineer/vue-cli-plugin-storybook.git
vue add storybook --packageManager npm
项目配置和其他步骤
其余更改可以从存储库的提交历史中查看。
资源
为了在Vue中设置Tailwind,我建议您遵循Markus Oberlehner关于此主题的精美文章系列:
使用Vue.js设置Tailwind CSS
使用PurgeCSS从Tailwind中删除未使用的CSS
使用Tailwind CSS创建可重用的功能性Vue.js组件
有关实用优先的CSS框架的想法
Adam Wathan - Tailwind CSS 最佳实践模式