# 手动部署第三方框架库

# 示例部署Echarts

1、新建src/vendor目录

project
├── vendor
│   └── echarts 
└── src                     
    └── views               
        └── 页面名称
            ├── index.html
            └── index.js     //页面JS入口文件

2、手动在html页面中引入Echarts文件

<!-- index.html -->
<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="renderer" content="webkit">
  <meta name="apple-mobile-web-app-capable" content="no" />
  <meta name="format-detection" content="telephone=no">
  <title>test1</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <!-- inject:vendor:css -->
  <!-- endinject -->
  <!-- inject:common:css -->
  <!-- endinject -->
  <!-- inject:page:css -->
  <!-- endinject -->
</head>

<body>
  <div id="main" style='width: 200px;height: 200px;'></div>
  <!-- build:js vendor/echarts/echarts.js -->
  <script src="vendor/echarts/echarts.js"></script>
  <!-- endbuild -->
  <!-- inject:vendor:js -->
  <!-- endinject -->
  <!-- inject:common:js -->
  <!-- endinject -->
  <!-- inject:page:js -->
  <!-- endinject -->
</body>

</html>

发布代码时与之间的文件会被自动合并、压缩，并生成dist/vendor/echarts/echarts.js。此模式同时适用于样式文件的部署。具体使用请参考：https://github.com/nelsyeung/usemin

3、在项目根目录的webpack.config.js中配置Echarts

//webpack.config.js
module.exports = {
  externals: {
    echarts: 'echarts'
  }
}

4、在src/views/页面名称/index.js文件引入使用Echarts

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});