一、基于vue的国家区号列表
vue-flag-list包含了大部分国家的区号，点击右边的三角形展开列表可以选择国家区号，若列表中没有区号，也可以自己输入区号。
1.1 初始化组件
用的是vue-cli来初始化组件，虽然有很多东西不需要，因为对这个比较熟悉，所以还是按照这个步骤来。
1.2 根据自己的需求，实现具体功能，我的主要功能写在vue-flag-list.vue组件中。
功能写好后，修改package.json等配置文件，为打包发布做准备
1.3 添加index.js
const VueFlagList = {
install: function (Vue) {
if (typeof window !== 'undefined' && window.Vue) {
Vue = window.Vue
}
Vue.component('VueFlagList',flagComponent)
}
}
install: function (Vue) {
if (typeof window !== 'undefined' && window.Vue) {
Vue = window.Vue
}
Vue.component('VueFlagList',flagComponent)
}
}
export default VueFlagList
1.4 修改配置文件
1.4.1 package.json
代码所在的仓库地址
"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": [...]
}
1.4.2 .gitignore 文件
因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。
1.4.3 webpack.prod.conf.js 文件
为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget，其支持的格式有：
- “var” - 以一个变量形式输出： var Library = xxx (default)；
- “this” - 以 this 的一个属性输出： this[“Library”] = xxx；
- “commonjs” - 以 exports 的一个属性输出：exports[“Library”] = xxx；
- “commonjs2” - 以 module.exports 形式输出：module.exports = xxx；
- “amd” - 以 AMD 格式输出；
- “umd” - 同时以 AMD、CommonJS2 和全局属性形式输出。
以下是 webpack.prod.conf.js 中 output 设置的示例：
Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue，打包的时候，不应该将 Vue 打包进组件库。但是，如果你将打包后的组件库以
