Vue 單組件打包導(dǎo)出到為普通頁面可以調(diào)用的 JS？

我的需求是：

使用 Vue 開發(fā) 插件，然后生成 JS，以便在其它網(wǎng)頁中調(diào)用。

問題是：

1）使用Vue 嵌入到普通html或者說普通JS當(dāng)中，不能實現(xiàn)很好的封裝。即將開發(fā)的文件很難以單文件形式保存，然后隨便拿來調(diào)用

2）以Vue-Cli搭建Vue項目，使用 npm run build 打包出來的 JS 無法在其它網(wǎng)頁中調(diào)用，只能用它自己構(gòu)建的index.html來使用。（這樣的話開發(fā)的東西擴展性太差）
【不知道我的那部分出現(xiàn)了錯誤】

3）Vue-cli搭建項目，使用 Vue.component install 方法注冊全局組件，這種組件在 Vue-cli搭建的項目里面可以使用，要怎么配置，才能使得 build 的 JS 使得其他網(wǎng)頁能夠以 <script>標(biāo)簽引入，并且使用 Vue.use()就可以使用

（我知道純粹用 Vue+webpack 構(gòu)建代碼比較爽快，但是我的項目是一個基于laravel的項目，并且頁面中使用了后臺模板的一些功能，當(dāng)然，肯定是多頁面應(yīng)用了，所以采用單一Vue來開發(fā)有些行不通。但是又看到Vue的強大魅力，想用它來重寫網(wǎng)站的 markdown 編輯器，目前的問題就是不知道怎么把這個編輯器封裝好。）

回答

編輯回答

舊時光

我理解你的意思是：在一個頁面中引入一個包含vue組件的js, 然后直接就可以通過調(diào)用的方法引入這個組件并使用了？例如這樣

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入樣式 -->
  <link rel="stylesheet" >
</head>
<body>
  <div id="app">
    <!-- **調(diào)用你寫的組件** -->
    <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是怎么實現(xiàn)的，github地址：https://github.com/ElemeFE/el...

2017年12月19日 04:41

編輯回答