玖叶教程网

{
 "presets": [
 ["env", {
 "modules": false,
 "targets": {
 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 }
 }],
 "stage-2",
 ],
 "plugins": [
 "transform-vue-jsx",
 "transform-runtime"
 ],
}

 "babel-helper-vue-jsx-merge-props": "^2.0.3",
 "babel-loader": "^7.1.1",
 "babel-plugin-syntax-jsx": "^6.18.0",
 "babel-plugin-transform-object-rest-spread": "^6.26.0",
 "babel-plugin-transform-runtime": "^6.22.0",
 "babel-plugin-transform-vue-jsx": "^3.5.0",
 "babel-preset-env": "^1.3.2",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-stage-2": "^6.22.0",
 "@babel/core": "^7.5.5",

module.exports = function (api) {
 api.cache(true);
 const presets = [
 "@babel/preset-env",
 "@vue/babel-preset-app",
 [
 '@vue/babel-preset-jsx',
 {
 functional: false
 }
 ]];
 const plugins = [
 "@babel/plugin-transform-runtime",
 '@babel/plugin-transform-object-assign',
 ['import', {
 libraryName: 'vant',
 libraryDirectory: 'es',
 style: true
 }, 'vant']];
 return {
 presets,
 plugins
 };
}

 Object.keys(components).forEach((key)=>{
 Vue.component(components[key].name,components[key])
 })

import MiButton from './Button/index'
import Modal from './Modal/index'
const components = [
 MiButton,
 Modal
]
const version = '1.0.0'
const install = function (Vue) {
 if (install.installed) return
 components.forEach(item => {
 Vue.component(item.name, item)
 })
}
if (typeof window !== 'undefined' && window.Vue) {
 console.log('运行环境为window');
 install(window.Vue)
}
export {
 MiButton,
 Modal,
 install
}
export default {
 install,
 version
}

// 组件中内置了单个组件所需的样式 无需配置babel-plugin-import
 import { MiButton, Modal } from 'miVant'
 import Vue from 'vue'
 Vue.use(MiButton)
 Vue.use(Modal)复制代码

import MiButton from 'miVant/lib/Button'
import Modal from 'miVant/lib/Modal'
import Vue from 'vue'
 Vue.use(MiButton)
 Vue.use(Modal)

@hd: 1px; // 基本单位
// 支付宝钱包默认主题
// https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范
// 色彩
// ---
// 文字色
@color-text-base: #000; // 基本
@color-text-base-inverse: #fff; // 基本 - 反色
@color-text-secondary: #a4a9b0; // 辅助色
@color-text-placeholder: #bbb; // 文本框提示
@color-text-disabled: #bbb; // 失效
@color-text-caption: #888; // 辅助描述
@color-text-paragraph: #333; // 段落
@color-link: @brand-primary; // 链接
@defaultColor: #455a64;
@hoverColor:#1989fa;
@height: 60px;
.navTitle{
 font-size:16px;
 font-weight:600;
 cursor: default;
}
.navItem {
 color: @defaultColor;
 font: 14px/24px PingFang SC;
 padding: 10px 10px 10px 50px;
 text-align: left;
 cursor: pointer;
}
.doc-nav-title,
.doc-comp-title{
 .navItem();
 .navTitle();
}
.doc-nav-item{
 .navItem()
}
.doc-comp-item{
 .navItem()
}

// 自定义webpack配置
const path = require('path');
module.exports = async ({ config, env }) => {
 // Extend it as you need.
 function resolve(dir) {
 return path.join(__dirname, '..', dir);
 }
 config.resolve = {
 extensions: ['.js', '.vue', '.json', '.jsx'],
 alias: {
 'vue

1. storybook 5.0 使用vue-loader15，默认使用babelrc进行解析和编译，需要自定义babelrc

{
 "presets": [
 "@babel/preset-env",
 "@vue/babel-preset-app",
 [
 "@vue/babel-preset-jsx",
 {
 "functional": false
 }
 ]
 ]
}

如何为组件配置Storybook环境

• stories目录下 新建 xx.js文件，此处映射为预览环境中的 左侧预览目录
• xx.js文件中 引入vue组件，编写测试案例。通过addDecorator函数引入 插件的相关功能

import { storiesOf } from '@storybook/vue';
import { withKnobs } from '@storybook/addon-knobs';
import miVantButton from '../src/components/Button/Button.vue'
import { withStorySource } from '@storybook/addon-storysource'
import buttonText from '../docs/button.md'
const simpleSourceCode = '<mi-vant-button>storyBook</mi-vant-button>'
storiesOf('miVantButton', module)
 .addDecorator(withKnobs)
 .addDecorator(withStorySource(simpleSourceCode))
 .addParameters({
 readme: {
 sidebar: buttonText,
 },
 })
 .add('with text', () => {
 return {
 components: { miVantButton },
 template: `<mi-vant-button>storyBook</mi-vant-button>`,
 }
 },
 {
 notes: {
 markdown: buttonText
 }
 }
 )

• 根目录下的.storybook文件夹中
• addons.js 中 注册相关的插件
• config.js中 配置允许环境，安装全局插件。类似于vue项目的main.js

import { configure, addDecorator, addParameters } from '@storybook/vue';
import { withNotes } from '@storybook/addon-notes'
import { addReadme } from 'storybook-readme/vue';
import { setOptions } from '@storybook/addon-options'
import { Button } from 'vant'
import Vue from 'vue'
Vue.use(Button)
const req = require.context('../stories', true, /\.js$/)
function loadStories() {
 req.keys().forEach((filename) => req(filename))
}
setOptions({
 name: 'mi-Vant',
 url: '#',
 goFullScreen: false,
 showStoriesPanel: true,
 showAddonPanel: true,
 showSearchBox: true,
 addonPanelInRight: true,
 sortStoriesByKind: false,
 hierarchySeparator: null,
 hierarchyRootSeparator: null,
 sidebarAnimations: true,
 selectedAddonPanel: undefined,
})
addParameters({
 viewport: { defaultViewport: 'galaxys5' },
})
addDecorator(addReadme);
addDecorator(withNotes)
// require
configure(loadStories, module);

遇到的问题

• vue-loader的版本使用问题
• 新版默认支持vue-loader15 而项目中vue-loader是13.3.0。 当时以为vue-loader15 是要搭配webpack4 一起使用的 所以降低了一下storybook的版本
• 低版本的storybook 默认使用babel6 只能解析.babelrc 且需要自定义webpack的配置 所以只能使用storybook中提供的自定义babel和webpack配置
• 基础设置都配置好了，在引入插件的时候 发现插件不能用.......... 不知名的报错 让人很蛋疼………..,会提示一个语法错误。而实际上我们配置的babel中已经解析了 但是 它还是会报错。。。。 猜测与插件版本有关

ReferenceError: regeneratorRuntime is not defined

• 按需引入vant库的时候 报了一个css-loader的错误
• 解决办法：增加exclude

 config.module.rules.push(
 {
 test: /\.(css|less)$/,
 use: [{
 loader: 'style-loader', // creates style nodes from JS strings
 }, {
 loader: 'css-loader',// translates CSS into CommonJS
 },
 { loader: 'postcss-loader' },
 {
 loader: 'less-loader',
 options: {
 javascriptEnabled: true
 } // compiles Less to CSS
 }],
 exclude: /node_modules/
 })

• 最终选择了 目前的稳定版，更改了相关的配置 并引入相关的插件

相关的插件

插件名称 功能 备注 @storybook/addon-notes 组件中添加notes，装饰story 注释文本信息 @storybook/addon-actions 展示event数据 @storybook/addon-backgrounds 改变页面的背景色 @storybook/addon-storysource 展示组件源码 @storybook/addon-knobs 动态展示props storybook-readme 将markdown导入为story @storybook/addon-viewport/register 增加移动端预览模式 @storybook/addon-options 配置面板选型 相关文档

vue-loader升级方案

Storybook 3.2 引入 Vue.js 支持

storybook for vue 官网

@storybook/vue npm

Storybook 5.0 正式发布：有史以来变化最大的版本

引入Rollup打包

介绍

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。采用 es6 原生的模块机制进行模块的打包构建, 编译之后包 体积会更小。

更多详情 可以看我之前的一篇文章

rollup的初识

引入之后的问题

• Cross-env报错的问题

sudo npm install --global cross-env

• Rollup 打包 ，如果使用babel.config.js+babel7的话，坑比较多…….有时候会出现一些不知名的错误

建议想尝试的同学 使用babel6 + babelrc这样的配置

chenshenhai.github.io/rollupjs-no…

• rollup-plugin-vue在低版本0.68的时候,会报一个找不到input入口的错，目前项目中的rollup版本是V1.19.3

附rollup.config.prod.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import buble from 'rollup-plugin-buble'
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss';
const path = require('path');
const ENV = process.env.NODE_ENV;
const resolveFile = function (filePath) {
 return path.join(__dirname, './', filePath)
}
export default {
 input: resolveFile('src/components/index.js'),
 output: {
 dir: 'es',
 format: 'umd',
 name: 'miVant',
 exports: 'named',
 },
 plugins: [
 resolve({ extensions: ['.js', '.vue'] }),
 postcss({
 extensions: ['.less', '.css'],
 use: [
 ['less', {
 javascriptEnabled: true
 }]
 ],
 extract: true,
 minimize: true,
 }),
 vue({
 template: {
 isProduction: true
 },
 css: false
 }),
 commonjs(),
 buble({
 objectAssign: 'Object.assign'
 }),
 replace({
 exclude: 'node_modules/**',
 ENV: JSON.stringify(process.env.NODE_ENV),
 }),
 (ENV === 'production' && uglify()),
 ],
};

留一个问题： rollup完成按需加载的打包

vue的markdown解析

I want

1. 将组件中的readme文档改造为组件的使用文档
2. 类似于目前知名组件库如 antd，element-ui，vant等支持代码库高亮显示，组件动态展示等效果,简而言之一句话： 能够在md中运行代码。
3. 让我们的组件库看起来不那么low..........

由于之前没有接触过类似的功能，于是漫漫的调研之路开始了。。。。

• Vue-press vue作者开发的 仿照vue的风格 适合静态文档 却不能很好的展示预览效果vuePress中文文档类似于hexo 想搭建个人博客的同学可以用一下
• vue-markdown-loader 搭配 vue-loader可以实现动态编译md文档
• 搭配vue-loader15版本的时候 需要注意采用兼容写法
• 搭配markdown-it系列能够良好的扩展md
• 需要注意的是 Vue-markdown-loader在搭配vue-loader15的时候 loader的写法要注意下
• 使用highlight.js的主题 支持主题的动态配置

附webpack中关于markdown的解析规则

{
 test: /\.md$/,
 use: [
 {
 loader: 'vue-loader'
 },
 {
 loader: 'vue-markdown-loader/lib/markdown-compiler',
 options: {
 raw: true,
 preventExtract: true,
 use: [
 [
 require('markdown-it-container'),
 'demo',
 {
 validate: function (params) {
 return params.trim().match(/^demo\s+(.*)$/)
 },
 render: function (tokens, idx) {
 if (tokens[idx].nesting === 1) {
 // 1.获取第一行的内容使用markdown渲染html作为组件的描述
 let demoInfo = tokens[idx].info.trim().match(/^demo\s+(.*)$/)
 let description = demoInfo && demoInfo.length > 1 ? demoInfo[1] : ''
 let descriptionHTML = description ? markdownRender.render(description) : ''
 // 2.获取代码块内的html和js代码
 let content = tokens[idx + 1].content
 // 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
 return `<demo-block>
 <div class="source" slot="source">${content}</div>
 ${descriptionHTML}
 <div class="highlight" slot="highlight">`
 } else {
 return '</div></demo-block>\n'
 }
 }
 }
 ]
 ]
 }
 }
 ]
 },

demo-block中手动补充copy功能

<template>
 <div class="demo-block">
 <div class="demo-block-source">
 <slot name="source"></slot>
 <span class="demo-block-code-icon" v-if="!$slots.default" @click="showCode=!showCode">
 <img
 alt="expand code"
 src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
 class="code-expand-icon-show"
 />
 </span>
 </div>
 <div class="demo-block-meta" v-if="$slots.default">
 <slot></slot>
 <span v-if="$slots.default" class="demo-block-code-icon" @click="showCode=!showCode">
 <img
 alt="expand code"
 src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
 class="code-expand-icon-show"
 />
 </span>
 </div>
 <div class="demo-block-code" v-show="showCode">
 <p class="copy" @click="copy">复制</p>
 <slot name="highlight"></slot>
 </div>
 </div>
</template>
<script type="text/babel">
export default {
 data() {
 return {
 showCode: false
 };
 },
 methods: {
 copy(e) {
 const hightext = e.target.nextElementSibling;
 const input = document.createElement("input");
 document.body.appendChild(input);
 let value = hightext.innerText;
 input.value = value;
 input.select();
 if (document.execCommand("copy")) {
 document.execCommand("copy");
 console.log("复制成功");
 }
 document.body.removeChild(input);
 }
 }
};
</script>
<style lang='less'>
@import "./less/demo-block.less";
.copy {
 cursor: pointer;
 position: absolute;
 right: 10px;
 top: 0;
}
</style>

相关文档

VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客

从 Vue-cli 开始构建 UI 库到 Markdown 生成文档和演示案例

vue-markdown-loader

markdown-it-container

vue-markdown-loader error with vue Loader 15

rem的适配+定制主题

rem的适配功能

• 通过postcss-px2rem将px单位自动转化为rem单位
• 通过项目根目录下的.postcssrc.js 设置转化规则

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
 "plugins": {
 "postcss-import": {},
 "postcss-url": {},
 // to edit target browsers: use "browserslist" field in package.json
 "autoprefixer": {
 browsers: ['Android >= 4.0', 'iOS >= 7']
 },
 "postcss-px2rem": { remUnit: 100 }
 }
}

• css中补充对应的font-size大小

@import './var.less';
html {
 font-size: 100px; /* no */
}
h1{
 font-size: 32px;
}
h2{
 font-size: 24px;
}
h3{
 font-size: 19px;
}
h4{
 font-size: 16px;
}
h5{
 font-size: 14px;
}
h6{
 font-size: 13px;
}
li,p,th,td {
 font-size: 16px;
}

定制主题

miVant 使用了 Less 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。

配置文件： ~/src/components/less/var.less

@primary-btn-color :#fbb212;

定制方法

1. 使用 less 提供的 modifyVars 即可对变量进行修改，下面是参考的 webpack 配置。
2. 这里以vue2.x版本的脚手架举例 /build/utils目录下

exports.cssLoaders = function (options) {
 options = options || {}
 const lessLoader = {
 loader: 'less-loader',
 options: {
 sourceMap: options.sourceMap,
 modifyVars: {
 color: 'red'
 }
 }
 }
 const lessConfig = {
 modifyVars: {
 primary-btn-color: 'red'
 }
 };
 const cssLoader = {
 loader: 'css-loader',
 options: {
 sourceMap: options.sourceMap
 }
 }
 const postcssLoader = {
 loader: 'postcss-loader',
 options: {
 sourceMap: options.sourceMap
 }
 }
 // generate loader string to be used with extract text plugin
 function generateLoaders(loader, loaderOptions) {
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader, lessLoader] : [cssLoader, lessLoader]
 if (loader) {
 loaders.push({
 loader: loader + '-loader',
 options: Object.assign({}, loaderOptions, {
 sourceMap: options.sourceMap
 })
 })
 }
 // Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader'
 })
 } else {
 return ['vue-style-loader'].concat(loaders)
 }
 }
 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
 css: generateLoaders(),
 postcss: generateLoaders(),
 less: generateLoaders('less', lessConfig),
 sass: generateLoaders('sass', { indentedSyntax: true }),
 scss: generateLoaders('sass'),
 stylus: generateLoaders('stylus'),
 styl: generateLoaders('stylus')
 }
}

项目启动和运行

// 克隆项目到本地
git clone https://github.com/majunchang/mi-vant.git
// 切换到master分支
// 安装相关依赖
 npm i
// npm 脚本
// storybook 预览模式
 "start": "npm run storybook",
 "storybook": "start-storybook -p 9001 -c .storybook",
// 打包storybook静态文件
 "build-storybook": "build-storybook -c .storybook",
// 文档预览 端口是8081
 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
// 打包之后的依赖包分析
 "bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json",
// webpack build
 "build": "node build/build.js",
// rollup 编译
 "clean": "rimraf rollupDist",
 "rollup": "cross-env NODE_ENV=production rollup --config=rollup.config.prod.js"

原文链接：https://juejin.im/post/5dc28c80f265da4d4576a141