Vue项目中安装axios、element-ui框架以及配置sass编译环境

注：本文章操作的前提是你已经搭建了vue的脚手架，若还未搭建，可转到我的另一篇博客参考搭建Node.js安装以及vue脚手架搭建

一、axios库的安装

1. 简介：Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
2. 打开你的IDE，ctrl+·进入终端，进入你的vue项目文件夹，输入以下命令行

 cnpm install --save axios

（建议使用cnpm（淘宝镜像源）用npm可能会报错，安装cnpm命令行：npm install -g cnpm --registry=https://registry.npm.taobao.org）

3. 在项目文件夹中找到main.js项目入口文件，引入axios库，配置如下：
   
4. axios的使用可以参考axios官网

二、Element-ui框架

5. 简介：Element-ui是基于Vue的MVVM框架开源出来的一套前端ui组件框架。
6. 安装Element-ui框架，同样的，你需要打开你的IDE，ctrl+·进入终端，进入你的vue项目文件夹，输入以下命令行：

cnpm i element-ui -S

安装完成后，你可以在node_module文件夹中找到element-ui包，并且在package.json文件中可以找到element-ui的版本信息，如：“element-ui”: “^2.13.0”

7. Element-ui的使用具体可以参照Element-ui官网

三、sass编译环境配置

8. 简介：Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
9. 首先在IDE终端中进入VUE项目文件夹，输入命令行安装sass的依赖包：

 cnpm install sass-loader@7.3.1 --save-dev

（注：由于目前的sass-loader版本较高，搭配目前最新的node-sass会出现报错的情况，所以建议在安装sass-loader的时候像我一样指定安装的版本。）

10. 由于sass-loader依赖于node-sass包，因此需要安装node-sass，命令行：
    npm install --save-dev node-sass
11. 接着在build文件夹下的webpack.base.conf.js的rules里面添加如下配置：

test: /\.sass$/,
loaders: ['style', 'css', 'sass']

具体配置位置如下图：

12. 配置完成后，测试一下是否可用，在App.vue文件的style标签中加入lang="scss"，并如下图设置页面背景颜色，若页面颜色改变，则说明Asass编译环境配置成功。
    

到此，vue项目中axios、element-ui框架、sass编译环境就配置好了，若有发现内容上的错误，可在评论区或私信我指出，感激不尽！node.js安装、vue脚手架的搭建或vuex的安装可参阅我其它博客：

Node.js安装以及vue脚手架搭建
vue项目中vuex的安装和使用