background

Build a simple front-end scaffolding based on Vue3.0 to facilitate the subsequent quick verification of ideas and project implementation.

Technologies and components involved: Vue3.0, ElementPlus, AXIos, VUE-Router, Vuex, Echarts.

Note:

  1. The premise needs to beNode.jsEnvironment, available for usenvmforNode.jsMultiversion management for.
  2. npm install <package>By default, dependencies are written after installation is completepackage.json, so the commands that the installation depends on are not attachedsaveParameters.
V12.16.1 $node - vCopy the code

Install vuE-CLI and create the project

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

The initial package.json dependency looks like this:

  "dependencies": {
    "core-js": "^ 3.6.5." "."vue": "^ 3.0.0"
  },
Copy the code

Integrated ElementPlus

  • Install dependencies
npm install element-plus
Copy the code

The package.json dependency becomes:

  "dependencies": {
    "core-js": "^ 3.6.5." "."element-plus": 7 "^ 1.1.0 - beta."."vue": "^ 3.0.0"
  },
Copy the code
  • To configure and modify the contents of 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);

/ / integration ElementPlus
import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css' // official recommendation
import 'element-plus/theme-chalk/index.css';

app.use(ElementPlus);
app.use(store).use(router).mount("#app");
Copy the code
  • Use the element – the UI
<template> <div> <el-row> <el-button> Default button </el-button> <el-button type="primary"> Primary button </el-button> <el-button </el-button> <el-button type="info"> </el-button> <el-button type="warning"> <el-button type="danger"> Danger button </el-button> </el-row> </div> </template> <script> import {defineComponent} from "vue"; export default defineComponent({ name: "ElementUIDemo", setup() {}, }); </script>Copy the code
  • Use effect

IO /#/ zh-cn /com…

Integrated Axios

  • Install dependencies
npm install axios
Copy the code

The package.json dependency becomes:

  "dependencies": {
    "axios": "^ 0.21.1"."core-js": "^ 3.6.5." "."element-plus": 7 "^ 1.1.0 - beta."."vue": "^ 3.0.0"
  },
Copy the code
  • According to the need to introduce

Import axios from “axios” in components that need to use axios;

  • Using 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>Copy the code
  • Use effect

Refer to axios source code and documentation at github.com/axios/axios

Integrated Echarts

  • Install dependencies
npm install echarts
Copy the code

The package.json dependency becomes:

  "dependencies": {
    "axios": "^ 0.21.1"."core-js": "^ 3.6.5." "."echarts": "^ 5.1.2." "."element-plus": 7 "^ 1.1.0 - beta."."vue": "^ 3.0.0"
  },
Copy the code
  • Using 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: [" sales "],}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"],}, yAxis: {}, series: [{name: "sales", type: "bar", data: [5, 20, 36, 10, 10, 20],}); window.onresize = function () { console.log("Resized.." ); myChart.resize(); }; }}}; </script>Copy the code
  • Use effect

Reference Echarts website: echarts.apache.org/zh/index.ht…

Errors that may be encountered

  • eslintDefault rules cause unnecessary errors

If ESLint is enabled, error will be reported when adding Component:

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

Json or.eslintrc.js under eslintConfig:

    "rules": {
      "vue/no-unused-components": "off".// An error is reported when a component is defined but not used
      "no-unused-vars":"off" // Close an error if a variable is defined but not used
    }
Copy the code
  • Development environments cross domains

Method 1: Perform front-end configuration and create a vue.config.js file with the following content:

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

Method 2: Since the back-end service is developed by ourselves, we can configure CORS on the back-end

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

Reference

  • Vue3.0
  • ElementPlus

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

Your comments and suggestions are welcome!