2.0.2 • Published 3 years ago

ibn-tag-new v2.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

ibn-tag

Install

1.npm安装 npm install ibn-tag-new

2.yarn安装 yarn add ibn-tag-new

3.引用ibn-tag-new.js

使用方法:

1.组件内部使用 html:

js:

    import IbnTagNew from 'ibn-tag-new'

    components: {
      IbnTagNew
    }

2. main.js 全局安装:
import IbnTagNew from 'ibn-tag-new'
Vue.use(IbnTagNew)
然后在其他.vue文件里面,直接使用组件 <IbnTagNew>标签一</IbnTagNew> 即可

3.直接引用打包后的 ibn-tag-new.js
这种方式就不需要webpack这类的构建工具,跟jquery的方式差不多,可以直接页面引用,使用方法示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <ibn-tag-new>标签1</ibn-tag-new>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/ibn-tag-new.js"></script>
<script>
  new Vue({
    el: '#app'
  })
</script>
</body>
</html>

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

webpack.config.js 小组件打包配置

module.exports = { entry: './src/lib/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'ibn-tag.js', library: 'IbnTag', // library指定的就是你使用require时的模块名,这里便是require("IbnTag") libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的。 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define } ...... }

引入组件

if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(paykeyboard); }

package.json 发布npm配置

"private": false, // private是true的时候不能发布到npm,需设置成false "main": "./dist/ibn-tag.js", "repository": { "type": "git", "url": "https://github.com/yucccc/ibn-tag" }

For detailed explanation on how things work, consult the docs for vue-loader.