vue-component-rollup-boilerplate
rollup构建Vue组件最简样板
Last updated 3 months ago by ghostcode521 .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-component-rollup-boilerplate 
SYNC missed versions from official npm registry.

本地创建一个目录&执行初始化命令:

mkdir vue-component
cd vue-component
npm init

安装依赖:

npm i rollup
npm i rollup-plugin-commonjs
npm i rollup-plugin-vue
npm i vue-template-compiler

在项目目录下面创建 src 目录并添加 index.js 文件和 vue-component.vue

vue-component.vue:

  <template>
      <div>
        {{message}}
      </div>
  </template>
  <script>
  export default {
      name: 'vue-component',
      data() {
          return {
            message:'hello vue component & rollup!'
          }
      },
  }
  </script>
  <style lang="less" scoped>

  </style>

index.js:

  import VueComponent from "./vue-component.vue"

  export default {
    install(Vue,options){
      Vue.component("vue-component",VueComponent)
    }
  }

注:

  1. 这里注册的组件名字最好和项目名一致,以免别人或自己使用的时候混淆。

测试组件:

vue serve ./src/vue-component.vue

注意上面的命令需要安装:

npm install -g @vue/cli-service-global

创建rollup.config.js文件:

  import vue from 'rollup-plugin-vue'
  import commonjs from 'rollup-plugin-commonjs';

  export default {
    input :"./src/index.js",
    output:{
      file:"./dist/index.cjs.js",
      format:"cjs",
    },
    // ...
    plugins: [
      // ...
      commonjs(),
      vue(/* options */),
    ],
  } 

package.json添加到scripts:

"build": "rollup -c"

并且把main的字段值改为:

"main": "./dist/index.cjs.js"

构建:

npm run build

在项目目录会多一个dist文件夹,里面包含index.cjs.js文件。

发布到https://npmjs.com:

npm login
npm publish

注:

  1. 确保有npmjs的账户,没有去注册一个
  2. 发布的项目名有可能被占用,修改后的项目名记得同步更改注册的组件名

Current Tags

  • 1.0.1                                ...           latest (3 months ago)

2 Versions

  • 1.0.1                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 0
Dependencies (4)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |