基于vue写一个插件，并发布npm

今天是一月一日，看看身边的情侣，感觉又是一个七夕节。

新年新气象，我应该立一些flag了，就一个月一个目标吧。

好话不多说，开始插件教程。

功能：用vue的自定义指令directive封装一个转换时间格式的插件

步骤：

1. 下载vue脚手架
2. 新建js文件，并写业务逻辑，调整打包引用路径
3. npm run build 打包
4. 登录npm发布
5. 下载使用

第一步：
因为是封装一个插件，所以用阉割版的vue脚手架就可以

vue init webpack-simple 名称
cnpm i
npm run dev

第二步：
新建一个index.js文件，内容如下：

let time = {};
// Vue.js 的插件应该暴露一个 install 方法。
// 这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
// 自定义指令为：v-time
time.install = function(Vue){
   Vue.directive('time',{
       bind(el){
       		// el相当于getElementById获取到的dom元素
            el.innerHTML = new Date(Number(el.innerHTML)).toLocaleString().replace(/(上午|下午|)/g,"");
       }
   })
}
// 判断vue是全局变量时，自动安装，这个如果你是vue脚手架import引入的，那就卵用没有
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}
export default time;

然后到webpack.config.js里面修改如下内容：
照着改就行

const NODE_ENV = process.env.NODE_ENV; // 新增-执行环境
module.exports = {
entry: NODE_ENV == 'development' ? './src/main.js' : './src/time.js', //新增-执行环境
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'time.js',
    library: 'time', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 新增-指定输出格式
    umdNamedDefine: true // 新增-会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

再然后到package.json中：

"name": "to-time-string",  // 包名，不能有大写字母，不能和已经发布的重复，如果不知道重复没，就到npm官网搜一下，搜不到就不会重复  
"description": "转换时间格式",   // 文件描述
"version": "1.0.0",  // 版本号，更新时如果和上一次版本号一样会报错
 "private": false,   // 重要的：把这个私有属性改为false
 "main": "dist/time.js",  // 重要的：新增一个这样的路径，这样在引用这个插件时，它就知道去哪里引用

最后到gitignore中，把dist删除了

哦还有一步，差点忘了，不过可以理解，毕竟我刚老了一岁。
到index.html中把引用路径改成

就可以了。
这是最后的目录结构，和用到的文件

第三步打包，不多赘述。

第四步npm发布：

进入文件所在的终端或者cmd中
没有npm帐号，就先去官网注册个。点这里进入官网地址

npm login

npm publish

有报错的话复制报错，百度就可以了，前辈们的硕果，是我们进步的阶梯。

第五步下载使用：

npm install to-time-string --save / cnpm i to-time-string --save

main.js中import引用插件，然后Vue.use(插件)

import toTimeString from 'to-time-string'

Vue.use(toTimeString)

<p>{{new Date().getTime()}}</p> //原时间戳
<p v-time>{{new Date().getTime()}}</p> // 用了插件的时间戳

如图：

以上是今日份的硕果，接下来该做我这一年的计划了，比如变白一点，和变有钱。