Фронтенд-скаффолдинг для разработки полного стека: Vue3.0 быстро интегрирует ElementPlus, Axios, Echarts

Vue.js
Фронтенд-скаффолдинг для разработки полного стека: 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"
  },
  • Настройте, измените содержимое в 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");
  • используя элемент-интерфейс
<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Официальная документация:element-plus.git ee.IO/#/this-cn/com…

Интегрировать Аксиос

  • Установить зависимости
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"
  },
  • Внедрить по требованию

Представлен в компонентах, которые должны использовать аксиомыimport axios from "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>
  • Эффект

2022-01-23-Axios.jpg

Ссылаться наaxiosИсходный код и адрес документа:github.com/axios/axios

Интеграция электронных диаграмм

  • Установить зависимости
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:E charts.apache.org/this/index.contracts…

возможные ошибки

  • 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" // 当存在定义而未使用的变量时，关闭报错
    }
  • Междоменная среда разработки

Способ 1. Настройте внешний интерфейс и создайте новый.vue.config.jsфайл со следующим содержимым:

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

Способ 2. Поскольку серверная служба разработана нами, настройка 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!

Категории