Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结
搭建项目架构
目采用Webpack+Vue-router的架构方式，开始安装（一切操作都在windows系统上完成）
1.按Win+R，然后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令：
npm install vue-cli -g
-g：表示全局安装
2.使用webstorm打开一个空项目目录，然后命令行中初始化项目，采用的是webpack模板，输入初始化命令：（此处开发工具为Webstorm）
vue init webpack projectName
projectName:表示你自己起的项目名称。
你也可以在开始的时候自己起一个项目名称，然后在该项目的空间下完成初始化工作，此时输入的命令为：
vue init webpack
3.在命令行中，进入项目目录（使用cd 文件名称），使用npm install 命令即可安装package.json里项目的依赖包。如果网速较慢的话，我们也可以使用淘宝镜像的cnpm来进行安装。
如果你之前没有使用过的话，需要使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。
在项目目录下使用命令进行初始化,此时输入的命令为：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后在使用cnpm来安装package.json,此时需要输入的命令为：
cnpm install
4.查看是否安装正确。在命令行中输入 npm run dev，如果能在浏览器中正常打开页面，说明安装成功。
到此，我们开始进行我们的代码编写阶段，不过在此之前，我们需要做一些准备工作：
在index.html中我们可以通过link方式引入项目title中的favicon，以及一些样式初始化工作。
然后，在conponents中编写我们组件--------->在需要使用该组件的页面的script中使用import导入组件并在components中挂在组件，此时我们就可以像使用html一样使用该组件了，【------>在index.js中配置使用路由时模板的加载规则。】
路由官方中文文档链接：https://router.vuejs.org/zh-cn/
常用生命周期：
beforecreate : 比如：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容
开始引入elementUi
使用npm的方式安装，它能更好地和webpack打包工具配合使用。
此时的命令为：
npm install element-ui --save
当然，我们也可以使用cnpm安装
安装完成后，在main.js中写入以下内容:
import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)
需要注意的是，样式文件需要单独引入。样式文件的theme-default可能有所不同，需要根据我们安装的elementUi选择主题，这里只是记录一个过程。
那么接下来我们就可以在我们自己的组件中使用Element来布局了，更多的element知识请阅读官方文档，地址为：
http://element.eleme.io/#/zh-CN
在我们使用elementUI的<el-col>过程中可能会出现100%高度的问题，那么是怎样解决的呢？
解决100%高的问题
原因：在页面中使用了Element组件，这样他会自动给我们生产虚拟DOM，我们无法设置高度100%；
解决方案：这时候可以利用javascript，来设置100%高度问题。先要给我们的<el-col>标签上添加一个id，我们这里把ID设置为
order-list。然后在vue构造器里使用mounted钩子函数来设置高度。
上述我们编写的组件的内容是静态的，现在我们使用Axios从后端拉取数据
要使用Axios还需要我们自己安装
安装Axios
我们还是使用npm install来进行安装，此时命令为：
npm install axios --save
--save:表示安装到生产环境中 若是--save-dev 则表示安装到开发环境中
引入Axios
在需要使用Axios 的组件中引入，由于使用了npm来进行安装，所以这里不需要填写路径，只需
import axios from 'axios'
在我们使用Axios从后台获取数据时，我们需要在vue的created钩子函数中进行操作，下面是一个简单的例子：
created(){
axios.get('url')
.then(response=>{
console.log(response);
this.result=response.data;
})
.catch(error=>{
console.log(error);
alert('网络错误，不能访问');
})
},把axios的方法写到了created钩子函数中，我们使用了get 方法进行拉取数据，如果拉取成功用远端数据对result进行赋值。
拉取报错,可能有两种情况：
- 网络不通：网络状况不是很好，这可以在失败后隔5秒再次请求。
- 报决绝访问：这种多是后端开发人员设置了不允许跨域访问，需要你和后端程序员一起调试解决。
打包注意事项有如下的几点：
1、把绝对路径改为相对路径
打开config/index.js下的assetsPublicPath改成
assetsPublicPath:'./'
只有这样才能保证打包我们的项目能正常运行。
2、在命令行中用npm run build 进行打包
npm run build
将打包完成后，我们会发现项目目录中会多次一个dist文件夹，这个就是我们项目打包后的结果，我只需要将dist文件的内容拷贝到服务器，分配端口后，我们就可以访问了。为此我们的整个过程完成。
上述只是一个大概结构，重点为各种包的引入过程，其余都很粗滤，更多内容会在之后补上。。。。。。。。。。。。。。。。。。。。。不喜勿喷。。。。。。。。。。。。。。。。。。。。。。。