大部分的教程都在写vue运用方式，是通过npm这种前端开发工具，编写vue组件，应用到单页应用开发，把js和html 分离导入。最终前端浏览器看到的页面只有几行html和js代码，呈现出来是一个丰富的vue组件组合成的页面。

这种方式，给那些从jquery+html+后端的前端程序员带来不少困惑。困惑为什么vue 的用法非得通过webpack 打包。

其实vue可以和jquery一样，通过script标签在html页面上引入，和jquery一样，在一个html页面里面直接写在<script></script>标签里面加js代码。

vue 很有优势，它比jquery方便很多，因为它可以把html 分成不同的块单独加入。比如按照传统的html的网页，我们可以把导航菜单做一个vue 对象，把轮播图做一个vue对象，其他页面元素任然保留h5的标签。这样以来，我们可以在导航采用bootstrap 的vue组件，轮播图 ，采用elementui的组件，哈哈，这个用法会导致页面引入的js库和css样式库比较多，不推荐这样使用，这里只是用来解释清楚这个道理。

好了，下面通过在页面里面加入 v-chart的曲线图案例：

在要显示曲线图的html页面：

 <div id="VueApp">
  <!-- 曲线图的ve 标签-->
   <ve-line :data="chartData"></ve-line>
  </div>
   <script src="./plugins/page/vue/vue.js"></script>
    <!--引入v-echart 曲线图等插件-->  
  <script src="./plugins/page/js/v-chart/echarts.min.js"></script> 
  <script src="./plugins/page/js/v-chart/index.min.js"></script> 
  <link rel="stylesheet" href="./plugins/page/css/style.min.css">
 <!--自定义组件vue-->  
  
 
 <script>
 var vue = new Vue({
     el: '#VueApp',
 
     data: function(){
         return {
             chartData: {
            columns: ['日期', '展现数','点击数'],
            rows: [
              { '日期': '1月1日', '展现数': 723 ,'点击数':562},
              { '日期': '1月2日', '展现数': 1223 ,'点击数':362},
              { '日期': '1月3日', '展现数': 2123 ,'点击数':662},
              { '日期': '1月4日', '展现数': 4123 ,'点击数':642},
              { '日期': '1月5日', '展现数': 3123,'点击数':2562 },
              { '日期': '1月6日', '展现数': 7123,'点击数':5621 }
            ]
          }
         }
     }
 })
 </script>

好了，以上就是在html页面里面加入vue的chart曲线图的 简单方法。

感谢的阅读，希望对你有所帮助！