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