一、基于vue的国家区号列表
vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号。
全球区号列表
1.1 初始化组件
用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来。
vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev
1.2 根据自己的需求,实现具体功能,我的主要功能写在vue-flag-list.vue组件中。
<template> <div id="flag"> ... </div> </template> <script> export default { name: 'vue-flag-list', ... } </script> <style scoped> ... </style>
功能写好后,修改package.json等配置文件,为打包发布做准备
1.3 添加index.js
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
1.4 修改配置文件
1.4.1 package.json
{ "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": [...] }
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,其支持的格式有: