Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结

Posted 2020-10-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结相关的知识，希望对你有一定的参考价值。

搭建项目架构

目采用Webpack+Vue-router的架构方式，开始安装（一切操作都在windows系统上完成）

1.按Win+R，然后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令：

mpm install vue-cli -g

-g：表示全局安装

2.在命令行中初始化项目，采用的是webpack模板，输入初始化命令：

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中配置使用路由时模板的加载规则。】

开始引入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进行赋值。

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