Vue plug-in development (time player), published to npm

Cause:
Because the project needs a timeline playback plug-in, some data is rendered according to time. I also searched a lot from the Internet, but most of them are not suitable. So I want to develop one myself and publish it to npm. This article mainly introduces the process of publishing components to npm, such as looking at component source code project source code & documentation

1. Project initialization
First, to create a project, the plug-in that encapsulates vue needs to write a simple vue component that does not need to rely on so many and huge configurations, so here is a simple version of the webapck configuration template:

vue init webpack-simple my-project
and then create a lib folder under src containing index.js and vue-time-play.vue The directory structure is as follows:

Export the component as a vue plugin in index.js:

import vueTimePlay from './vue-time-play' // 导入组件
const timePlay = {
  install (Vue, options) {
    Vue.component(vueTimePlay.name, vueTimePlay)  // vueTimePlay.name 组件的name属性
  }
}
export default timePlay // 导出..

Introduced in main.js:

import vueTimePlay from './lib/index.js'
Vue.use(vueTimePlay)

2. Development components
Write components in vue-time-play.vue This component is a basic vue time player, the main function is to switch by day or time, and you can configure the speed to switch the playback speed. The code in vue-time-play.vue is omitted here, please move to the source code link at the end to view.

3. Modify configuration items
Modify webpack.config.js

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

Then npm run build

Modify the package.json file:

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 当import vueTimePlay from vue-time-play 的时候引入的包
"main": "dist/vue-time-play.js",

4. Release

Notice:

Check the .gitignore file, don't forget to submit the dist file

Every time npm publish needs to change the version number, the version field in package.json

1、需要注册npm账号，然后需要在邮箱里验证一下
2、npm login 登录
3、npm publish 发布

5. Confirm whether the release is successful

Check on npm to see if there are any plug-ins released by yourself, and then:

npm install vue-play-time --save
 
//main.js中引入
import vuePlayTime from 'vue-play-time'
Vue.use(vuePlayTime);
 
// app.vue
<vue-time-play :options="options" @onAnimate="onAnimate" @onClickEnd="onclick"></vue-time-play>
data () {
    return {
      options: {
        speedConfig: {
          "慢": 5000,
          "中":3000,
          "快":1000,
        },
        speed:1000,
        startDate:'2020-05-29 ',
        endDate:'2020-06-01',
        timeUnitControl: true,
        timeUnit: '天'
      }
    }
  },

Finish

Thanks for reading.

Project source code & documentation

Welcome everyone to install and use, if you have any questions, you can leave a message to communicate with each other.

This article is reproduced from: xmy_wh's blog, the original link https://blog.csdn.net/xmy_wh/article/details/106619586 .