first commit

Author: why

.DS_Store

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/env"
+  ]
+}

.babelrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.browserslistrc

@@ -0,0 +1 @@
+{"name":"Asd","className":"asd","version":"1.0.0","description":"asd","buildPath":"dist","examplePath":"examples","npmName":"@imooc-cli/vue3-component","npmVersion":"1.0.0"}

.componentrc

@@ -0,0 +1,34 @@
+module.exports = {
+  root: true,
+
+  env: {
+    node: true
+  },
+
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  },
+
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}

.eslintrc.js

@@ -0,0 +1 @@
+node_modules

.gitignore

@@ -0,0 +1,24 @@
+# npm publish
+## npm login登陆
+## package.json配置
+* "private": false 
+* "files": ["dist"] // 发布的时候上传哪些文件
+* "peerDependencies": {"vue": "^3.0.0"} // 外部依赖
+* script: { "prepublishOnly": "npm run build" } // 确保npm publish的是最新的dist文件
+
+## 发布前的准备
+* 检查eslint---npm run lint 
+* 单元测试---npm run test
+* rollup打包---npm run build
+
+## 安装husky运行git生命周期
+```
+npm install husky@4 -D
+
+// package.json 配置下面这段代码
+"husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run test"
+    }
+}
+```

NPMPulish.md

@@ -0,0 +1,102 @@
+# rollpu 打包组件库
+* 每一个组件实例上挂载install方法
+这是为了能够使用
+import {LText} from 'abb-component'
+app.use(LText)
+这种方式单独引入组件
+```
+import { App } from 'vue'
+import LShape from './LShape.vue'
+LShape.install = (app: App) => {
+  app.component(LShape.name, LShape)
+}
+
+export default LShape
+```
+* 配置入口文件index.ts
+这是为了能够使用
+import AbbComponent from 'abb-component'
+app.use(AbbComponent)
+这种方式引入全部组件
+```
+import {App} from 'vue';
+import LText from './components/LText';
+import LImage from './components/LImage';
+import LShape from './components/LShape';
+
+const components = [
+    LText,
+    LImage,
+    LShape
+]
+
+const install = (app: App) => {
+    components.forEach(component => {
+        app.component(component.name, component)
+    })
+}
+
+export {
+    LText,
+    LImage,
+    LShape,
+    install
+}
+
+export default {
+    install
+}
+```
+* 配置rollup.config.js文件
+    依赖的插件
+    + @rollup/plugin-json //解析模块中导入*.json文件
+    + @rollup/plugin-node-resolve //解析node_modules中绝对路径的引入
+    + rollup-plugin-css-only //解析*.vue文件中<style></style>中的内容
+    + rollup-plugin-typescript2 //解析*.ts文件
+    + rollup-plugin-vue //解析*.vue文件
+* tsconfig配置导出*.d.ts文件 
+```
+compilerOptions: {
+    declaration: true
+}
+```
+* 配置package.json文件中的第三方依赖
+如果npm install abb-components 的时候发现项目中并没有安装vue包，就会打印warning信息
+```
+"peerDependencies": {
+    "vue": "^3.0.0"
+}
+```
+* rollup.config.json文件中的第三方依赖
+打包生成的文件中并没有将引用到的vue, loadsh-es这两个库中的代码融合，而是通过import {} from '' 这种方式饮用，所以想用这个组件库，就必须在项目中安装vue, loadsh-es
+```
+external: ['vue', 'loadsh-es']
+```
+
+* 拆分打包配置文件
+对于umd格式的文件需要做单独处理
+因为在上一步配置了外部依赖库，所以在倒入的时候需要知道这个外部依赖库的全局变量名
+还需要配置这个组件库的全局变量名 
+```
+output: {
+        name: 'ABBComponent',
+        file: file('umd'),
+        format: 'umd',
+        globals: {
+            'vue': 'Vue',
+            'loadsh-es': '_'
+        },
+        exports: 'named'
+    }
+```
+
+* package.json文件内配置
+当一个项目安装了这个组件库, 那么就会在import from的时候去找到这个组件库的入口文件
+但如果项目使用的是es模块,且组件库package.json配置了module这个属性，那么就会优先引用这个配置的文件
+```
+  "main": "dist/app-component.umd.js",
+  "module": "dist/app-component.esm.js",
+  "types": "dist/index.d.ts"
+
+```
+

README.md

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

babel.config.js

@@ -0,0 +1,209 @@
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, withCtx, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementBlock, withModifiers } from 'vue';
+import { without, mapValues, pick } from 'lodash-es';
+
+const commonDefaultProps = {
+    // actions
+    actionType: '',
+    url: '',
+    // size
+    height: '',
+    width: '373px',
+    paddingLeft: '0px',
+    paddingRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    // border type
+    borderStyle: 'none',
+    borderColor: '#000',
+    borderWidth: '0',
+    borderRadius: '0',
+    // shadow and opacity
+    boxShadow: '0 0 0 #000000',
+    opacity: '1',
+    // position and x,y
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    right: '0'
+};
+const textDefaultProps = {
+    // basic props - font styles
+    text: '正文内容',
+    fontSize: '14px',
+    fontFamily: '',
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    textDecoration: 'none',
+    lineHeight: '1',
+    textAlign: 'left',
+    color: '#000000',
+    backgroundColor: '',
+    ...commonDefaultProps
+};
+const imageDefaultProps = {
+    src: 'test.url',
+    ...commonDefaultProps
+};
+const shapeDefaultProps = {
+    backgroundColor: '',
+    ...commonDefaultProps
+};
+const isEditingProp = {
+    isEditing: {
+        type: Boolean,
+        default: false
+    }
+};
+const textStylePropNames = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
+const imageStylePropsNames = without(Object.keys(imageDefaultProps), 'actionType', 'url', 'src');
+const shapeStylePropsNames = without(Object.keys(imageDefaultProps), 'actionType', 'url');
+const transformToComponentProps = (props) => {
+    const mapProps = mapValues(props, (item) => {
+        return {
+            type: item.constructor,
+            default: item
+        };
+    });
+    return { ...mapProps, ...isEditingProp };
+};
+
+const useComponentCommon = (props, picks) => {
+    const styleProps = computed(() => pick(props, picks));
+    const handleClick = () => {
+        if (props.actionType === 'url' && props.url && !props.isEditing) {
+            window.location.href = props.url;
+        }
+    };
+    return {
+        styleProps,
+        handleClick,
+    };
+};
+
+const defaultProps$2 = transformToComponentProps(textDefaultProps);
+var script$2 = defineComponent({
+    name: 'LText',
+    props: {
+        ...defaultProps$2,
+        tag: {
+            type: String,
+            default: 'div',
+        },
+    },
+    setup(props) {
+        const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
+        return {
+            styleProps,
+            handleClick,
+        };
+    },
+});
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "l-text-component",
+    onClick: _ctx.handleClick
+  }, {
+    default: withCtx(() => [
+      createTextVNode(toDisplayString(_ctx.text), 1 /* TEXT */)
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["style", "onClick"]))
+}
+
+script$2.render = render$2;
+script$2.__scopeId = "data-v-6bf95b7a";
+script$2.__file = "src/components/LText/LText.vue";
+
+script$2.install = (app) => {
+    app.component(script$2.name, script$2);
+};
+
+const defaultProps$1 = transformToComponentProps(imageDefaultProps);
+// array that contains style props
+var script$1 = defineComponent({
+    name: 'l-image',
+    props: {
+        ...defaultProps$1
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+pushScopeId("data-v-1e970aa2");
+const _hoisted_1 = ["src"];
+popScopeId();
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("img", {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "l-image-component",
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+    src: _ctx.src
+  }, null, 12 /* STYLE, PROPS */, _hoisted_1))
+}
+
+script$1.render = render$1;
+script$1.__scopeId = "data-v-1e970aa2";
+script$1.__file = "src/components/LImage/LImage.vue";
+
+script$1.install = (app) => {
+    app.component(script$1.name, script$1);
+};
+
+const defaultProps = transformToComponentProps(shapeDefaultProps);
+// array that contains style props
+var script = defineComponent({
+    name: 'l-shape',
+    props: {
+        ...defaultProps
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "l-shape-component",
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
+  }, null, 4 /* STYLE */))
+}
+
+script.render = render;
+script.__file = "src/components/LShape/LShape.vue";
+
+script.install = (app) => {
+    app.component(script.name, script);
+};
+
+const components = [
+    script$2,
+    script$1,
+    script
+];
+const install = (app) => {
+    components.forEach(component => {
+        app.component(component.name, component);
+    });
+};
+var index = {
+    install
+};
+
+export { script$1 as LImage, script as LShape, script$2 as LText, index as default, install };