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: