前言
前端开发中，使用框架是必不可少的。而 Vue.js 可谓是目前最受欢迎的前端框架之一。但是，在一些简单的项目中，使用完整的 Vue.js 可能显得有些臃肿，并且会降低应用的加载速度。那么，如何在简单的项目中使用 Vue.js 呢？这里就介绍一款 npm 包：vue-in-browser。
简介
vue-in-browser 是一款可以在浏览器中直接使用 Vue.js 的 npm 包，并且不需要打包工具的支持。只要在 HTML 页面中引入 vue-in-browser 的 CDN，就可以使用 Vue.js 的所有特性。
安装
首先，需要在 HTML 页面的 <head> 标签中引入 vue-in-browser 的 CDN。引入方式如下：
<script src="https://unpkg.com/vue-in-browser/dist/vue-in-browser.min.js"></script>
然后，在 <body> 标签中，添加一个带有 id 属性的元素，用于容纳 Vue.js 应用。如下所示：
<div id="app"></div>
最后，在 <script> 标签中编写 Vue.js 应用代码即可。示例如下：
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>示例
下面，我们来创建一个简单的 Vue.js 应用，实现一个简单的计数器。首先，在 HTML 中添加以下代码：
<div id="app">
<button v-on:click="increment">计数器 +1</button>
<p>当前计数器的值为：{{ count }}</p>
</div>然后，在 <script> 中添加以下代码：
-- -------------------- ---- -------
--------
--- -----
--- -------
----- -
------ -
--
-------- -
---------- -------- -- -
-------------
-
-
---
---------这样，一个简单的计数器就完成了。在页面中点击按钮，就可以实现计数器的自增操作。
总结
vue-in-browser 是一款非常实用的 npm 包，不需要打包工具的支持，就可以在浏览器中直接使用 Vue.js。在一些简单的项目中，可以使用 vue-in-browser 来实现快速开发，加速项目的开发进度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4881e8991b448ebce2