elementui实现文件下载 element ui下载

目录

简介

一、下载与安装

1.Vue开发环境构建

1.1 Nodejs

1.2 npm

1.3 webpack

1.4 vscode

2. 搭建Vue环境

二、Vue知识学习

1.基础知识

2.路由

3.axios

4.Vuex

5.Vue插件

6.Vue插件-ElementUI组件库

---

简介

本文重在介绍Vue环境的安装以及Vue配合Element的使用，其他知识在Vue的官网中有更详尽的介绍，可以在文章中给出的网址进行学习。

---

一、下载与安装

1.Vue开发环境构建

1.1 Nodejs

在Nodejs官网下载对应系统文件： https://nodejs.org/en/

安装完执行：node -v 查看是否安装完以及版本

1.2 npm

下载npm工具，也可以下载npm的镜像cnpm。

在命令行执行：

npm install -g cnpm -registry=https://registry.npm.taobao.org

安装完执行：npm -v 查看是否安装完以及版本

1.3 webpack

构建工具。

1.4 vscode

在扩展中安装插件：

Vetur

vscode-icons

2. 搭建Vue环境

进入vueg官网： https://cn.vuejs.org/

安装费vuecli工具：

npm isntall -g @vue/cli                //用npm工具

cnpm isntall -g @vue/cli                 //用cnpm工具

创建项目：

在vscode中创建文件夹，在文件夹中按 Crtl + · 切换到终端

 输入下面命令创建项目，项目名不可以含有大写：

vue create vue-base

选择第三个：Manusally select featrues  ，回车进行选择

 

使用 空格 进行选择和取消选择，选择如下2个： 

选择2.X的版本

选择保存配置文件的位置，随便一个：

 是否保存刚刚的配置并命名，下次直接选择名字，初始阶段可以选不：

然后会进入下载依赖。

安装完毕：

然后进入项目：

cd vue-base

运行项目：

npm run serve

然后浏览器访问  localhost:8080  会出现下面页面：

二、Vue知识学习

可以在vue官网进行学习： https://cn.vuejs.org/guide/quick-start.html

1.基础知识

1、模板语法

        1.插值

                1.文本： {{ }}

                2.原始HTML：v-html

                3.属性： v-bind:attr

                4.模板语法使用限制：每个绑定仅支持单一表达式

        2.指令

        3.缩写

                1.v-bind: 缩写-> :

2、条件渲染

        1.v-if

        2.v-else

        3.v-show

3、列表渲染

        1.v-for

        2.数组更新检测

4、事件处理

        1.v-on:click  缩写-> @

        2.methods 承载事件函数

        3.事件传递参数

        4.修饰符

5、表单输入与绑定

        1.v-model

        2.修饰符

                .lazy

                .number

                .trim

6、计算属性vs侦听器

        1.computed

        2.watch

7、class与Style绑定

        1.数组

        2.对象

8、组件基础

        1.创建组件

        2.引用组件

        3.组件时独立实例化的，data必须是一个函数

        4.props 父向子传参数

        5.自定义事件 子传父

9、插槽

        1.插槽内容

        2.具名插槽

        3.作用域插槽

10、动态组件与异步组件

2.路由

进入官网学习： https://router.vuejs.org/zh/introduction.html

1.路由的基础使用

2.动态路由匹配

3.文件分离

4.嵌套路由

5.编程式导航

6.命名视图

7.重定向和别名

8.HTML5  History模式

9.导航守卫

3.axios

进入中文网学习： https://www.kancloud.cn/yunye/axios/234845

安装axios：

 npm install axios

1.封装axios请求：

import axios from "axios"
import qs from "querystring"
 
 
/**
 * 错误信息处理函数
 */
const errorsHandle = (status,info) =>{
    switch(status){
        case 400:
            console.log("语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。")
            break;
        case 401:
            // token:令牌
            console.log("服务器认证失败")
            break;
        case 403:
            console.log("服务器已经理解请求，但是拒绝执行它");
            break;
        case 404:
            console.log("请检查网络请求地址")
            break;
        case 500:
            console.log("服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。")
            break;
        case 502:
            console.log("作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。")
            break;
        default:
            console.log(info)
            break;
    }
}
 
 
/**
 * 创建Axios的实例对象
 */
var instance = axios.create({
    timeout: 5000,
});
 
/**
 * 拦截器
 */
 
instance.interceptors.request.use(
    config =>{
        if(config.method === "post"){
            config.data = qs.stringify(config.data)
        }
        return config;
    },
    error =>{
        return Promise.reject(error);
    }
)
 
instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error  =>{
        const { response } = error;
        if(response){
            errorsHandle(response.status,response.info);
        }else{
            console.log("请求被中断了");
        }
    }
)
 
// 封装get 和 post请求
 
export default instance

2.跨域问题

1.后台解决

安装cors

npm install cors --save

服务器使用cors：

const express = require("express");
const app = express();
const cors = require("cors");
 
 
app.use(cors());
app.get("/list",(req,res) =>{
    res.send({
        status:200,
        result:"Hello"
    })
})
 
app.listen(3000,()=>{
    console.log("服务器运行在3000端口上");
})

2.前端解决：开发环境下跨域

在项目根目录下增加 vue.config.js 文件，书写跨域配置：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000/',
                changeOrigin: true,
                pathRewrite:{
                    '^/api':""
                }
            }
        }
    }
}

4.Vuex

进入官网学习： https://vuex.vuejs.org/zh/

5.Vue插件

github网站很多插件供选择： https://github.com/vuejs/awesome-vue

6.Vue插件-ElementUI组件库

ElementUI官网：https://element.eleme.cn/#/zh-CN/component/installation

可以使用添加插件方式添加插件： https://github.com/ElementUI/vue-cli-plugin-element

创建项目，进入项目后，

插件添加方式：

vue create my-app cd my-app vue add element

选择 import on demand （按需加载

选择中文

运行项目

src包下会出现element.js插件

可以将途中所示的组件全部放入上面图中的js文件中，项目开发完再将没用的组件删去。

初始化 HelloWord.vue

在element组件库中选择合适的组件：

黏贴到vue的网页代码中 ，crtl+s保存一下修改过的类

又如添加表格组件

<template>
  <div class="hello">
    <div>
      <h3>开关</h3>
      <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
    </div>
    <div>
      <h3>表格</h3>
      <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
      return {
        value: true,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      };
    },
};
</script>

 浏览器访问 localhost:8080