Install the Vue simple scaffold and initialize the project

For the development of Vue components, I usually use webpack as the loading / packaging tool for the previous resources. In order to achieve the goal of rapid development, Vue official also made a scaffold for webpack. We only need a little modification of the scaffold to complete the preparation before developing components.

//Installing the Vue scaffold
npm install -g vue-cli

//Initializing a simple Vue project with a scaffold
vue init webpack-simple vue-test

//Initialize project
cd vue-test
npm i

//Run view project
npm run dev

Create and develop components

After initializing the project, the file directory structure is:

Move the SRC folder Chinese file to the root directory, and modify the webpack.config.js file under the root directory. Change entry: './src/main.js' to entry: './main.js' , which is convenient for testing in the early stage of development.

Then create the index.js file and the vue-test.vue component in the SRC folder.

After writing the component code in vue-test.vue, edit index.js, which is the component exit. When using, the import forms of external projects are:

//ES6
import VueTest from 'vue-test'

//AMD
var VueTest = require('VueTest')

//Direct reference
<script src="./dist/vue-pay-keyboard.js"></script>

So, write index.js as

import VueTest from './vue-test.vue'

VueTest.install = function(Vue){
  Vue.component('VueTest', VueTest)
}

//For direct reference
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(VueTest);
}

//Import for ES6 and AMD
export default VueTest

Test components

Testing local calls in app.vue

<vue-test></vue-test>

import VueTest from './src'
export default {
  name: 'app',
  components: {
    VueTest
  }
}

Test the global call in main.js

import VueTest from './src'
Vue.use(VueTest)

Modify the partial configuration of webpack.config.js to package once

module.exports = {
  //entry: './main.js',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    //filename: 'build.js'
    filename: 'vue-test.js' 
    library: 'vue-test', 
    libraryTarget: 'umd',
    umdNamedDefine: true 
  }
}

After packaging, create a static file test direct reference in the root directory

<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="dist/vue-test.js"></script>


<vue-test></vue-test>

Publish package to NPM server

Modify the package.json file and some configurations

{
  "name": "vue-test", 
  "version": "1.0.0",
  "description": "a plugin for vue2", 
  "keywords": [
    "vue2",
    "test"
  ], 
  "author": "zdy1988 <virus_zhh@126.com>", 
  "main": "dist/vue-test.js", 
  "private": false, 
  "license": "MIT", 
  "repository": {
    "type": "git",
    "url":""
  }
}

Publish to NPM server command

npm whoami
npm publish

Relevant information:

publish npm package