Heartsuit's Simple Blog

A place to hold mainly reading notes, and some technical stuff occasionally. 这里主要是一些读书笔记、感悟;还有部分技术相关的内容。


Project maintained by heartsuit Hosted on GitHub Pages — Theme by mattgraham

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

目录[-]

背景

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

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

Note:

  1. 前提需要有 Node.js 环境,可使用 nvm 进行 Node.js 的多版本管理。
  2. 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"
  },
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");
<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>

2022-01-23-ElementPlus.jpg

参考 ElementPlus 官方文档:https://element-plus.gitee.io/#/zh-CN/component/quickstart

集成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"
  },
<template>
  <div></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>

2022-01-23-Axios.jpg

参考 axios 源码及文档地址:https://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"
  },
<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>

2022-01-23-Echarts.jpg

参考Echarts官网:https://echarts.apache.org/zh/index.html

可能遇到的错误

如果开启了 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);
            }
        };
    }
}

Reference


If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!


「说点什么吧😊~~😊」: