The first step is to create the project

    vue create .
Copy the code

or

    vue ui
Copy the code

As shown in figure

Choose the default when creating the project

Step 2 Modify the file directory structure

Add the Packages folder to the root directory

The SRC file was renamed example for the example

Create vue. Config. js

As shown in figure:

Step 3 Add the configuration

The default for vue-CLI is entry: ‘examples/main.js’, so we need to modify the entry path again after the file modification

// vue.config.js
module.exports = {
    // Add the examples directory as a new page
    pages: {
      index: {
        // Page entry
        entry: 'examples/main.js'.// Template source
        template: 'public/index.html'.// Output the file name
        filename: 'index.html'}},css: { extract: false } / / important
    // Whether to extract CSS from components into a separate CSS file
  }
Copy the code

CSS: {extract: false} If the value is true, the CSS file in the vue file will be extracted separately and need to be referenced separately. I set the value to false and directly associate them with each other. After modification, execute the NPM run serve test project to see if it can run normally

Step 4 Develop the components

A Packages directory has been created to hold components

This directory holds a separate development directory for each component, and an index.js to integrate all components and export them

Each component should be placed in a separate directory, including its component source directory SRC, and index.js for external reference

Take case as an example

As shown in figure packages/case/SRC/main. Vue file for component development It is important to note that the component must declare the name, the name is the component of the label Because want to use below

    // packages/case/index.js
    // Import the component. The component must declare its name
    import Case from './src/main.vue'
    // Add the install method for the component to import on demand
    Case.install = function (Vue) {
        Vue.component(Case.name, Case)
    }
    export default Case
Copy the code

Step 5 Integrate and export the components

    // packages/index.js
    // Import a single component
    import Case from './case/index.js'

    // Store components in an array structure for easy traversal
    const components = [
        Case
    ]
    // Define the install method
    const install = function (Vue) {
        if (install.installed) return
        install.installed = true
        // Iterate over and register global components
        components.map(component= > {
            Vue.component(component.name, component)
        })
    }
    if (typeof window! = ='undefined' && window.Vue) {
        install(window.Vue)
    }
    export default {
        // Exported objects must have an install method
        install,
        // List of components. components }Copy the code

Component development is now complete

Register for use in examples/main.js

    import Vue from 'vue'
    import App from './App.vue'
    import Case from '.. /packages/index' // There is no package yet. We refer to it as a relative path for now
    Vue.use(Case) // Register the whole play
    new Vue({
    render: h= > h(App),
    }).$mount('#app')
Copy the code
// examples/App.vue <template> <div id="app"> <div class="warp"> <Case @caseData="oncaseData"></Case> </div> </div> </template> <script> export default { methods: { oncaseData (data) { console.log(data); }}}; </script> <style> * { margin: 0; padding: 0; } .warp{ width: 1000px; margin: 0 auto; } </style>Copy the code

Start the project with NPM Run Serve and test the components for bugs

Step 6 Package components

Vue-cli 3.x provides a library file packaging command

Four main parameters are required:

  1. Target: Builds the application by default. Change it to lib to enable the build library mode

  2. Name: indicates the output file name

  3. Dest: output directory, dist by default, lib instead

  4. Entry: The path to the entry file. The default path is SRC/app. vue

Based on this, add a lib command to scripts in package.json

 "scripts": {
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js",},Copy the code

Then run the NPM run lib command to compile the component

Step 7 Prepare for release

Note: private: indicates whether the project is private. Change the value to false to publish the project to NPM. Main: entry file that should point to the compiled package file;

After the image is packaged, we get this fileThe entry file should point to the compiled package file;

"main": "lib/tag-textarea.umd.min.js".Copy the code

Step 8 Publish to NPM

NPM does not allow duplicate package names, so check whether there are duplicate package names logged in before publishing

npm login 
Copy the code

release

npm publish
Copy the code

Last step use

    import Vue from 'vue'
    import App from './App.vue'
    import Case from 'jswang-vue-template'
    Vue.use(Case) // Register the whole play
    new Vue({
    render: h= > h(App),
    }).$mount('#app')
Copy the code

The project addressGithub.com/wangjinshen…

Reference: www.cnblogs.com/tongjiaojia…