vue 一步一步开发 集成 elemenUI 打印控件 echars

一 初始化安装
1 安装 node 官网下载最新版本。
官网地址： http://nodejs.cn/
2 安装vue
npm install -g vue-cli
如果上一步比较慢，那么请使用国内的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --global vue-cli
3 运行 cmd 领命，按照下面一行一行的输入
E: # 跳转到E盘
mkdir ysu_study_vue # 创建目录
cd ysu_study_vue # 进入目录
mkdir vue-project # 创建目录
cd vue-project # 创建webpack项目
4 初始化项目
vue init webpack ysu_gou_project #创建项目 后面是项目名称
提示信息如下
在安装中有自动提示，要求输入项目名称、描述、作者、关键字、是否使用eslint、是否加入单元测试。有需求的话按照提示直接输入或选择即可，
没有需求的话一路按回车和Y就行了。
： 一直按回车即可
? Project name my-project
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run npm install for you after the project has been created? (recommended) npm
正常应该没有问题呢。
/*如果报异常
删除 node_modules
5 安装依赖 项目启动
cnpm install
#启动命令
cnpm run dev
二：vue 配置
1、 推荐使用axios作为ajax插件，这也是vue官方所推荐的插件 ，axios的安装和使用都很简单。

2、 跨域问题： 配置CORS，或者在webpack中设置proxyTable，或者自己搭建nginx服务进行反向代理。

3、 proxyTable： webpack中proxyTable的设置（其实是vue-cli生成的项目自带的配置项）。请注意，webpack的proxyTable只在开发环境中有效

4、 浏览器兼容性问题：
增加babel-polyfill
vue-cli默认生成的项目中自带了babel-plugin-transform-runtime，其保证了一定的浏览器兼容性。但其存在两个问题：
异步加载组件时，会产生 polyfill 代码冗余
不支持对全局函数与实例方法的 polyfill
介于以上两种缺点，我们需要增加babel-polyfill，同时删除babel-plugin-transform-runtime
# 安装babel-polyfill
cnpm install babel-polyfill --save
# 卸载babel-plugin-transform-runtime
cnpm uninstall babel-plugin-transform-runtime --save
修改文件.babelrc
“plugins”: [
// “transform-runtime”
],
在入口文件main.js中引入babel-polyfill
import ‘babel-polyfill’

三 、接下来我们开始安装 element
//element 配置 第二部分为 vue引用
cnpm i element-ui -S
cnpm i element-theme -g
cnpm i element-theme-chalk -D
et -i element-variables.scss
cnpm install --save axios vuex --save
cnpm install --save qs --save
cnpm install requirejs --save
cnpm install eventsource-polyfill --save-dev
cnpm install node-sass sass-loader --save-dev
cnpm install babel-polyfill --save
cnpm install --save xlsx file-saver
cnpm install -D script-loader
cnpm install prettier@~1.12.0 --save-dev
cnpm install vue-print-nb --save
四 、安装打印控件
1，安装 cnpm install vue-print-nb --save
2，引入 安装好以后在main.js文件中引入
import Print from ‘vue-print-nb’
　　 Vue.use(Print); //注册
3，现在就可以使用了 div 标签里面增加样式 就可以使用了 class=“no-print” 这里设置不打印部分

五 、 安装图形报表 echars
10， 安装 echarts https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
cnpm install echarts -S
main.js 引入echarts
注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts 
vue页面使用：
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
 export default { 
 name: 'hello', 
 data () { return { msg: 'Welcome to Your Vue.js App' } }, 
 mounted(){ this.drawLine(); }, 
 methods: { 
 drawLine(){ // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20]
			}]
		});
		}
	}
}