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进行赋值。

拉取报错,可能有两种情况：

1. 网络不通：网络状况不是很好，这可以在失败后隔5秒再次请求。
2. 报决绝访问：这种多是后端开发人员设置了不允许跨域访问，需要你和后端程序员一起调试解决。

最后，项目打包和上线

打包注意事项有如下的几点：

1、把绝对路径改为相对路径

打开config/index.js下的assetsPublicPath改成

assetsPublicPath:'./'

只有这样才能保证打包我们的项目能正常运行。

2、在命令行中用npm run build  进行打包

npm run build

将打包完成后，我们会发现项目目录中会多次一个dist文件夹，这个就是我们项目打包后的结果，我只需要将dist文件的内容拷贝到服务器，分配端口后，我们就可以访问了。为此我们的整个过程完成。

上述只是一个大概结构，重点为各种包的引入过程，其余都很粗滤，更多内容会在之后补上。。。。。。。。。。。。。。。。。。。。。不喜勿喷。。。。。。。。。。。。。。。。。。。。。。。