vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号。
全球区号列表
<强> 1.1初始化组件
用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来。
vue init webpack vue-flag-list
cd vue-flag-list
cnpm安装
npm运行dev
<强> 1.2根据自己的需求,实现具体功能,我的主要功能写在vue-flag-list.vue组件中。
& lt; template>
& lt; div id=肮臁北?
…
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“vue-flag-list”,
…
}
& lt;/script>
& lt; scoped>风格;
…
& lt;/style>
之前
功能写好后,修改package.json等配置文件,为打包发布做准备
<强> 1.3添加index.js
从“进口flagComponent。/Vue-Flag-List.vue '
const VueFlagList={
安装:函数(Vue) {
如果(typeof窗口!==ㄒ濉?,window.Vue) {
Vue=window.Vue
}
Vue.component (VueFlagList, flagComponent)
}
}
出口默认VueFlagList
之前
<强> 1.4修改配置文件
<强> 1.4.1 package.json
{
“名称”:“vue-flag-list”,
“版本”:“1.0.0”,
“描述”:“一个vue插件,用于输入和选择区域代码”,
“作者”:“guimin”,//因为组件包是公用的,所以私人为假
“私人”:假的,//配置主要结点,如果不配置,我们在其他项目中就不用进口XX的包名”来引用了,只能以包名作为起点来指定相对的路径
“主要”:“dist/vue-flag-list.min.js”,
"脚本":{
“开发”:“节点构建/dev-server.js”,
“开始”:“节点构建/dev-server.js”,
“构建”:“节点构建/build.js”
},//指定代码所在的仓库地址
“库”:{
“类型”:“git”,
“url”:“git + https://github.com/linmoer/vue-flag-list.git”
},//指定打包之后,包中存在的文件夹
“文件”:[
“距离”,
" src "
),//指定关键字
“关键词”:[
“vue”,
“国旗”,
“代码”,
“国旗代码”
),
“许可证”:“麻省理工学院”,//开源协议//项目官网的url
“主页”:“https://github.com/linmoer/vue-flag-list readme”,
“依赖”:{
2.3.3“vue”:“^”
},
" devDependencies ": {
…
},
“引擎”:{…},
“browserslist”: […]
}
之前
<强> 1.4.2 .gitignore文件
因为要用dist文件夹,所以在.gitignore文件中把dist/去掉。
3 <强> webpack.prod.conf。js文件
为了支持多种使用场景,我们需要选择合适的打包格式。常见的打包格式有CMD, AMD, UMD格式,CMD只能在节点环境执行,AMD只能在浏览器端执行,同UMD格式时支持两种执行环境。显而易见,我们应该选择UMD格式.Webpack中指定输出格式的设置项为output.libraryTarget,其支持的格式有:
<李>“var”——以一个变量形式输出:var图书馆=xxx(默认);李
<李>“这”——以这样的一个属性输出:这(“图书馆”)=xxx;李
<李>“commonjs”——以出口的一个属性输出:出口(“图书馆”)=xxx;李
<李>“commonjs2”——以模块。出口形式输出:模块。李出口=xxx;
<李>“amd”——以amd格式输出,李
<李>“umd格式”——同时以AMD, CommonJS2和全局属性形式输出。
以下是webpack.prod.conf。js中输出设置的示例:
输出:{
路径:路径。解决(__dirname“. ./dist”),
publicPath:”,
文件名:“vue-flag-list.min.js”,
库:“VueFlagList”,
libraryTarget:“umd格式”,
umdNamedDefine:真
},
之前
Vue是组件库的外部依赖。组件库的使用者会自行导入Vue,打包的时候,不应该将Vue打包进组件库。但是,如果你将打包后的组件库以& lt; script>标签形式直接引入,你会发现并不能正常执行,提示vue未定义。
