全栈开发之前端脚手架:Vue3.0快速集成ElementPlus,Axios,Echarts

简介: 全栈开发之前端脚手架:Vue3.0快速集成ElementPlus,Axios,Echarts

背景


搭建基于 Vue3.0 的极简前端脚手架,方便后续快速验证想法以及项目实施。

涉及到的技术及组件: Vue3.0 , ElementPlus , axios , vue-router , vuex , Echarts


Note:


  1. 前提需要有 Node.js 环境,可使用 nvm 进行 Node.js 的多版本管理。


  1. npm install <package>默认会在依赖安装完成后将其写入package.json,因此安装依赖的命令都未附加save参数。


$ node -v
v12.16.1


安装vue-cli并创建项目


npm install -g @vue/cli
vue --version
vue create hello-world

刚开始的 package.json 依赖是这样:

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },


集成ElementPlus


  • 安装依赖
npm install element-plus

此时, package.json 的依赖变为:

"dependencies": {
    "core-js": "^3.6.5",
    "element-plus": "^1.1.0-beta.7",
    "vue": "^3.0.0"
  },
  • 配置,修改main.js中的内容:
import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// createApp(App).use(store).use(router).mount('#app')
const app = createApp(App);
// 集成ElementPlus
import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css' // 官方推荐
import 'element-plus/theme-chalk/index.css';
app.use(ElementPlus);
app.use(store).use(router).mount("#app");
  • 使用element-ui
<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "ElementUIDemo",
  setup() {},
});
</script>
  • 使用效果

image.png

参考 ElementPlus 官方文档:element-plus.gitee.io/#/zh-CN/com…


集成Axios


  • 安装依赖
npm install axios

此时, package.json 的依赖变为:

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-plus": "^1.1.0-beta.7",
    "vue": "^3.0.0"
  },
  • 按需引入


在需要使用axios的组件中引入 import axios from "axios";


  • 使用axios
<template>
  <div>{{ info }}</div>
</template>
<script>
import { defineComponent } from "vue";
import axios from "axios";
export default defineComponent({
  name: "AxiosDemo",
  setup() {},
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    axios
      .get("https://api.coindesk.com/v1/bpi/currentprice.json")
      .then((response) => (this.info = response.data));
    this.callApi();
  },
  methods: {
    callApi: function () {
      axios.get("/api/book/list?userId=1").then(
        function (res) {
          if (res.status == 200) {
            console.log(res.data);
          } else {
            console.error(res);
          }
        },
        function (res) {
          console.error(res);
        }
      );
    },
  },
});
</script>
  • 使用效果

image.png

参考 axios 源码及文档地址:github.com/axios/axios


集成Echarts


  • 安装依赖
npm install echarts

此时, package.json 的依赖变为:

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "echarts": "^5.1.2",
    "element-plus": "^1.1.0-beta.7",
    "vue": "^3.0.0"
  },
  • 使用Echarts
<template>
  <div id="chart" :style="{ width: '1000px', height: '550px' }"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "EchartsDemo",
  setup() {},
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById("chart"));
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {
        console.log("Resized..");
        myChart.resize();
      };
    }
  }
};
</script>
  • 使用效果

image.png

参考Echarts官网echarts.apache.org/zh/index.ht…


可能遇到的错误


  • eslint默认规则导致不必要的报错


如果开启了 eslint ,新增 Component 时,报错:


The "EchartsDemo" component has been registered but not used  vue/no-unused-components

解决方法:在 package.json.eslintrc.js 的eslintConfig下添加:

"rules": {
      "vue/no-unused-components": "off", // 当存在定义而未使用的组件时,关闭报错
      "no-unused-vars":"off" // 当存在定义而未使用的变量时,关闭报错
    }
  • 开发环境跨域

方法一:在前端进行配置,新建 vue.config.js 文件,内容如下:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000/',
                changeOrigin: true,
                ws: true,
                secure: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

方法二:因为后端服务是我们自己开发的,所以可以在后端进行CORS配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").
                        allowedOriginPatterns("*").
                        allowedMethods("*").
                        allowedHeaders("*").
                        allowCredentials(true).
                        exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L);
            }
        };
    }
}


目录
相关文章
|
2月前
|
监控 前端开发 测试技术
如何实现前端工程化的持续集成和持续部署?
通过以上步骤,可以建立一套完整的前端工程化 CI/CD 流程,实现前端代码从开发、测试、构建到部署的全自动化,提高开发效率、保证代码质量,快速响应用户需求和市场变化。
|
2月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
前端开发 数据可视化 JavaScript
前端echarts加标记点及标记线和提示框
通过本文的介绍,希望您能够深入理解和掌握如何在ECharts中添加标记点、标记线和提示框,并在实际项目中灵活运用这些功能,提升数据可视化效果。
47 4
|
3月前
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
199 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
5月前
|
缓存 前端开发 JavaScript
微前端集成优化:让所有子应用体积更小,加载更快!
【8月更文挑战第17天】微前端集成优化:让所有子应用体积更小,加载更快!
118 1
|
4月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
97 3
|
5月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
60 0
|
5月前
|
前端开发 Devops 持续交付
【前端自动化新高度】Angular与Azure DevOps完美结合:从零构建持续集成与持续部署的全自动流水线,提升开发效率与软件交付质量!
【8月更文挑战第31天】Angular作为领先的前端框架,以强大功能和灵活性深受开发者喜爱。Azure DevOps提供一站式DevOps服务,涵盖源码管理、持续集成(CI)及持续部署(CD)。本文将指导你如何在Azure DevOps中搭建Angular项目的CI/CD流程,并通过具体示例代码展示整个过程。首先,我们将创建一个Angular项目并初始化Git仓库;然后,在Azure DevOps中设置CI流水线,定义YAML文件以自动化构建和部署流程。最终实现每次提交代码后自动构建并部署至Azure Web App,极大提升了开发效率和软件交付速度,使团队更专注于创新。
52 0
|
5月前
|
前端开发 JavaScript API
Web服务器与前端技术的集成
【8月更文第28天】随着Web开发技术的发展,现代前端框架如React、Vue.js等已经成为构建复杂Web应用的标准工具。为了提供更好的用户体验,这些前端应用通常需要与后端Web服务器进行紧密集成。本文将详细介绍如何将React和Vue.js与后端Web服务器无缝集成,以创建高性能且用户友好的Web应用。
91 0
|
5月前
|
数据可视化
Echarts数据可视化开发| 移动效能平台附源码
Echarts数据可视化开发| 移动效能平台附源码

热门文章

最新文章