vue.min.js 獨立版本中,第三方js 通過vm使用vue內定義的數據

 vue.min.js是啥？

vue.min.js是vue已封裝好vue.js技術，方便我們學習vue技術，使用<script>可直接將vue.min.js文件導入HTML中的，即可方便學習和快捷使用vue相關技術。

在HTML中引入vue.min.js文件

1、獨立版本

我們可以在 Vue.js 的官網上直接下載 vue.min.js 並用 <script> 標簽引入。

下載地址：https://vuejs.org/js/vue.min.js

在一個大屏展示的項目里 , <script> 很直接的使用了vue.min.js .不用放在webpack  npm  環境中就可以使用vue, 大屏展示肯定會有chart圖 ,china地圖等,他們是如何使用vue定義的數據和管控的域內的數據呢

data={
        alarm:{alarm:10,fault:10},
        dtu:{ on:150,off:150},
        plc:{on:10,off:10}
...................

var vm = new Vue({
    el: '#content',
    data: scn_data,
    methods: {
        details: function() {
        },
    },

<div class="report">
                    <div class="report1">
                        <p>告警信息</p>
                        <small>{{alarm.alarm}}條</small>
                    </div>
                    <div class="report2">
                        <p>故障信息</p>
                        <small>{{alarm.fault}} 條</small>
                    </div>
               </div>
如果實時信息signalr控制 alarm.alarm 
只需在

signalr 控制的js中使用 vm.alarm.alarm=count;  即可 

chat.client.sendmessage = function(name, message)
{
    count++;
    $("title").html("("+count+"條消息)通知-消息");
    vm.alarm.alarm=count;
 /*   $('.report1 small').html(count+"條");*/
   /* $('.layui-btn .layui-bg-gray').html(count);*/
    //向頁面添加消息
    $("#messageBox").append('<li><strong style="color:green">' + name + '</strong>:' + message + '</li>');
}

 不用build ,不用webpack 那些東西,拿過來直接就用了, 而且第三方js 也能使用其數據.

可是這個寫法 按照網上加載組件提示不行

我想要將vue本地化，現在的思路是在js文件中引入vue.min.js，但是vue.min.js本身不是用export輸出的，官網上也是在html中引入，請問該如何改造vue.min.js才能使用import引入

 

 

vue.esm.browser.min.js
ES模塊是JavaScript在ES2015版本開始提供的語言標准級別的模塊化方案，在此之前JavaScript一直沒有語言級別的模塊化體系。本文我們來看一下vue.js中的ES模塊的使用。

 

Vue 2.6版本的一個新特性是包含了一個ES模塊瀏覽器構建，允許您像這樣在頁面上加載Vue:

<script type="module">
  import Vue from 'https://unpkg.com/vue@2.6.0/dist/vue.esm.browser.min.js';
  new Vue({
    ...  
  });
</script>

這意味着您可以編寫模塊化的Vue應用程序，無需構建步驟即可在瀏覽器中運行(當然是在受支持的瀏覽器中)。

使用Vue作為ES模塊有什么好處?

瀏覽器模塊加載和解析的效率目前低於經典的代碼分割腳本。由於你可能仍然需要使用一個捆綁器來進行linting, TypeScript的轉換，樹的搖動等等，這也不會簡化你的設置。

雖然我不是WordPress插件開發人員，但有人告訴我，瀏覽器模塊構建在這里是很有用的，因為一個WordPress站點可能有多個插件，它們的Vue版本可能相互沖突。一個經典的腳本會污染全局命名空間，並可能導致問題，而模塊不會。

但是如果您沒有那個用例，為什么還要使用瀏覽器模塊呢?

這里有幾個(公認抽象的)原因:

JavaScript開發完全依賴於Webpack和Rollup是不好的，因為這是一個重要的瓶頸和失敗的脆弱點。

保存一個本地的、標准化的解決方案將隨着時間的推移簡化web開發。我們可以摒棄所有競爭的模塊系統，比如CommonJS。也許甚至Webpack和Rollup也會悄然消失，因為現在模塊已經標准化了，一個標准化的捆綁解決方案正在被提出。

ES模塊的瀏覽器實現是一個可以構建的平台。現在，將捆綁作為一個經典腳本更好，但這並不意味着它將永遠如此。查看JS模塊的下一步計划，了解谷歌計划的一些細節。

看來去除那npm繁瑣的一套是未來的趨勢

 

參考文檔:https://m.html.cn/web/vue-js/12595.html