vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev
<template>
<div id="flag">
...
</div>
</template>
<script>
export default {
name: 'vue-flag-list',
...
}
</script>
<style scoped>
...
</style>
import flagComponent from './Vue-Flag-List.vue'
const VueFlagList = {
install: function (Vue) {
if (typeof window !== 'undefined' && window.Vue) {
Vue = window.Vue
}
Vue.component('VueFlagList', flagComponent)
}
}
export default VueFlagList
{
"name": "vue-flag-list",
"version": "1.0.0",
"description": "A vue plugin for entering and selecting area code",
"author": "guimin",
// 因为组件包是公用的,所以private为false
"private": false,
// 配置main结点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径
"main": "dist/vue-flag-list.min.js",
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
// 指定代码所在的仓库地址
"repository": {
"type": "git",
"url": "git+https://github.com/linmoer/vue-flag-list.git"
},
// 指定打包之后,包中存在的文件夹
"files": [
"dist",
"src"
],
// 指定关键字
"keywords": [
"vue",
"flag",
"code",
"flag code"
],
"license": "MIT", //开源协议
// 项目官网的url
"homepage": "https://github.com/linmoer/vue-flag-list#readme",
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {
...
},
"engines": {...},
"browserslist": [...]
}
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'vue-flag-list.min.js',
library: 'VueFlagList',
libraryTarget: 'umd',
umdNamedDefine: true
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
new ExtractTextPlugin({
filename: 'vue-flag-list.min.css'
}),
entry: {
app: './src/index.js'
},
- vue-flag-list + build + dist - src + img index.js Vue-Flag-List.vue ...
npm build npm pack
cnpm install 路径/vue-flag-list-1.0.0.tgz
import VueFlagList from 'vue-flag-list' import 'vue-flag-list/dist/vue-flag-list.min.css' Vue.use(VueFlagList)
<flagCode height="30" width="120" @getCode="getCode"></flagCode>
methos: {
getCode(code) {
console.log(code)
}
}
npm login
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish # lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有