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

我的需求是:

使用 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 编辑器,目前的问题就是不知道怎么把这个编辑器封装好。 )

回答:

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

首先,我先纠正一下这个问题的题目:

原: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>

大概总结下就是

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

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

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

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

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

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

回答:

我理解你的意思是:在一个页面中引入一个包含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…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注