Vue 单组件打包导出到为普通页面可以调用的 JS？

黎明踏浪

发布于
2017-12-07

我的需求是：

使用 Vue 开发 插件，然后生成 JS，以便在其它网页中调用。

问题是：

1）使用Vue 嵌入到普通html或者说普通JS当中，不能实现很好的封装。即将开发的文件很难以单文件形式保存，然后随便拿来调用

2）以Vue-Cli搭建Vue项目，使用 npm run build 打包出来的 JS 无法在其它网页中调用，只能用它自己构建的index.html来使用。（这样的话开发的东西扩展性太差）
【不知道我的那部分出现了错误】

3）Vue-cli搭建项目，使用 Vue.component install 方法注册全局组件，这种组件在 Vue-cli搭建的项目里面可以使用，要怎么配置，才能使得 build 的 JS 使得其他网页能够以 <script>标签引入，并且使用 Vue.use()就可以使用

（我知道纯粹用 Vue+webpack 构建代码比较爽快，但是我的项目是一个基于laravel的项目，并且页面中使用了后台模板的一些功能，当然，肯定是多页面应用了，所以采用单一Vue来开发有些行不通。但是又看到Vue的强大魅力，想用它来重写网站的 markdown 编辑器，目前的问题就是不知道怎么把这个编辑器封装好。）

html vue.js vue-cli webpack

阅读 20.3k

2 个回答

黎明踏浪

发布于
2017-12-10

✓ 已被采纳

额，问题解决了。分享一下。

首先，我先纠正一下这个问题的题目：

原：Vue 单组件打包导出到为普通页面可以调用的 JS？

现改为：Vue 插件开发？（按照这个思路，很快就能够找到答案）

是的，原本的提问本来就有些问题，因为只知道需求而对Vue术语不太了解，导致方向错误，从而在查找答案的过程中很难搞清楚。
（在 @tomc 给的建议中，我先是查看了 element-ui的webpack.config.js .由于对于webpack一知半解所以没怎么搞清楚。后来迫于无奈，只好去看vue的官方文档。看到官方文档中有提到插件这一说法，索性看了下，才明白，我的这种需求应该是属于插件范畴，所以在网上找到 vue 插件开发的文章看了下，问题得到jie'jue）

OK，说正事儿。参考文章：http://www.imooc.com/article/... （10分钟教你快速开发一个vue插件并发布npm）

首先，得先搞清楚Vue 所开发的插件的几种引用方式：

ES6 
import vuePayKeyboard from 'vue-pay-keyboard' 
// 通过require 导入 
var vuePayKeyboard = require('vuePayKeyboard')
// 通过use挂载 
Vue.use(vuePayKeyboard) 
// 或者直接导入js文件 
<script src="./dist/vue-pay-keyboard.js"></script>

大概总结下就是

在模块化开发中引用（使用npm安装，通过es6的import导入，然后Vue.use()）
普通html页面引入（通过<script>标签引入）

而我要做的，就是通过模块化开发的流程，开发出插件来，以满足在普通HTML页面调用的需求

具体实践过程呢，在参考文章中已经说的很详细。这里总结下比较重要的几点

所开发的组件应实现公开方法 install
webpack 入口文件修改为注册插件index.js
libraryTarget设置为 'umd'

ok，再具体的还是就看参考文章里，再放下地址

参考文章：http://www.imooc.com/article/... （10分钟教你快速开发一个vue插件并发布npm）

这是你的玩具车吗

发布于
2017-12-07

更新于
2017-12-07

我理解你的意思是：在一个页面中引入一个包含vue组件的js, 然后直接就可以通过调用的方法引入这个组件并使用了？例如这样

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <!-- **调用你写的组件** -->
    <el-button @click="visible = true">按钮</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>欢迎使用 Element</p>
    </el-dialog>
  </div>
</body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- **引入你写的组件库** -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

建议看下element-ui的package.json文件中打包成js是怎么实现的，github地址：https://github.com/ElemeFE/el...

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题