zoukankan      html  css  js  c++  java
  • vue3.x版本安装element-ui、axios及echarts图表插件

    项目中安装使用element-UI

    命令行:

    vue add element

    安装成功后,项目会自动将element-UI引入项目中,刷新项目即可

    项目中安装使用axios数据请求

    vue add axios

    安装成功后,项目会自动将axios引入项目中,刷新项目即可

    配置跨域请求本地服务器后台数据:

    1、在项目根目录下新建文件vue.config.js

    加入以下代码:

    module.exports = {

       runtimeCompiler: true,

       publicPath: '/', // 设置打包文件相对路径

       devServer: {

          // open: process.platform === 'darwin',

          // host: 'localhost',

          port: 8080,//服务器项目运行端口

          // open: true, //配置自动启动浏览器

          proxy: {

            '/api': {

               target: 'http://localhost:88', //自己本地服务器接口

                changeOrigin: true,

               ws: true,

               pathRewrite: {

                  '^/api': ''

                }

            }

          }

       },

    }

    2、src目录下main.js文件加入下面两句话:

    axios.defaults.timeout = 5000 // 请求超时

    axios.defaults.baseURL = '/api/'  // api 即上面 vue.config.js 中配置的地址

    3、组件文件中使用axios进行数据请求:

      例如:

     

    项目中安装使用echarts图表插件

    npm install --save echarts vue-route

  • 相关阅读:
    vs快捷键
    深入理解react和redux
    eclispe下maven项目报错解决方式
    ios fixed浮层 光标下移解决方案
    jQuery的extend()用法
    连续数字数值转换成逗号分隔
    css 清除浮动
    恶补JavaScript第二篇
    恶补JavaScript第一篇
    中文英文左右padding一致两端对齐实现(转载)
  • 原文地址:https://www.cnblogs.com/zyl-930826/p/11319964.html
Copyright © 2011-2022 走看看