开发vue2插件

1. vue create app 新建项目
2. 项目文件改造，目标结构为
3. /components/css/card.scss

.m-card {
    width: 270px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15);
    padding-bottom: 8px;
    &-img{
        height: 152px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    &-summary{
        padding:8px;
        text-align: left;
        font-size: 14px;
    }
}

4. /components/css/demo.scss

.m-demo {
    color: blue;
}

5. /components/css/index.scss

@import './demo.scss';
@import './card.scss';

6. components/lib/card/src/main.vue

<template>
  <div class="m-card" :style="width ? { width: width + 'px' } : {}">
    <div
      class="m-card-img"
      :style="imgHeight ? { height: imgHeight + 'px' } : {}"
    >
      <img :src="imgSrc" />
    </div>
    <div v-if="summary" class="m-card-summary">summary</div>
    <div v-else class="m-card-summary">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    a: {
      type: String,
      default: '000',
    },
    width: {
      type: Number,
      default: 0,
    },
    imgSrc: {
      type: String,
      default: "",
    },
    imgHeight: {
      type: Number,
      default: 0,
    },
    summary: {
      type: String,
      default: "",
    },
  },
  mounted(){
    console.log(this.imgSrc);
  }
};
</script>

7. components/lib/card/index.js

import Card from './src/main.vue'
Card.install = function (Vue) {
    Vue.component(Card.name, Card)
}
export default Card

8. components/lib/demo/src/main.vue

<template>
    <h1 class="m-demo">
        afsdfad
    </h1>
</template>

<script>
export default {
    name:'Demo'
}
</script>

9. components/lib/demo/index.js

import Demo from './src/main.vue'
Demo.install = function (Vue) {
    Vue.component(Demo.name, Demo)
}
export default Demo

10. components/lib/index.js

import Demo from './demo'
import Card from './card'
const components = {
    Demo,
    Card
}
const install = function (Vue) {
    if (install.installed) return;
    Object.keys(components).forEach(key => {
        Vue.component(components[key].name, components[key])
    })
}
const API = {
    install
}

export default API

11. examples/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Demo></Demo>
    <Card :imgSrc="imgSrc"></Card>
    <Card :imgSrc="imgSrc" summary="阿斯顿发送到发的发送到发">
      <template v-slot:footer>
        <div>
          <div class="level">重疾了撒打发斯蒂芬</div>
          <div class="price">213yuan1</div>
        </div>
      </template>
    </Card>
  </div>
</template>

<script>
import imgSrc from './assets/logo.png'
console.log(imgSrc);
export default {
  name: "App",
  data(){
    return {
      imgSrc
    }
  }
};
</script>

<style>
</style>

12. examples/main.js

import Vue from 'vue'
import App from './App.vue'

import '../components/css/demo.scss'
import '../components/css/card.scss'
import Demo from '../components/lib/demo/index'
import Card from '../components/lib/card/index'
Vue.use(Demo)
Vue.use(Card)
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

13. babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

14. gulpfile.js

const gulp = require('gulp')

const sass = require('gulp-sass')(require('sass'))
const minifyCSS = require('gulp-minify-css')
gulp.task('sass', async function () {
    return gulp.src('components/css/**/*.scss')
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(gulp.dest('dist/css'))
})

15. vue.config.js

module.exports = {
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    }
}

16. webpack.common.js

// {
//     card: './components/lib/card/index.js',
//         demo: './components/lib/demo/index.js'
// }
const { VueLoaderPlugin } = require('vue-loader')
const list = {}
const path = require('path')
const glob = require('glob')
async function makeList(dirPath, list) {
    const files = glob.sync(`${dirPath}/**/index.js`)
    console.log(files);
    for (let file of files) {
        const component = file.split(/[/.]/)[2]
        console.log(component);
        list[component] = `./${file}`
    }
}

makeList('components/lib', list)

module.exports = {
    mode: 'development',
    entry: list,
    output: {
        filename: '[name].umd.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'mui',
        libraryTarget: 'umd'
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader'
                    }
                ]
            }
        ]
    }
}

17. package.json

{
  "name": "zanlan-uia",
  "version": "0.1.0",
  "description": "mcui",
  "main": "dist/index.umd.js",
  "keywords": [
    "mc-ui",
    "vue",
    "ui"
  ],
  "files": [
    "dist",
    "components"
  ],
  "author": "zanlan",
  "scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build": "npm run build:js && npm run build:css",
    "build:js": "webpack --config ./webpack.common.js",
    "build:css": "npx gulp sass"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "gulp": "^4.0.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^5.1.0",
    "node-sass": "^7.0.1",
    "sass": "^1.53.0",
    "sass-loader": "5",
    "vue": "^2.6.11",
    "vue-loader": "^16.8.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11",
    "webpack-cli": "^4.10.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}