How to add "vue-echarts-v3" in Quasar CLI

• 
  
  M

  minko Feb 19, 2019, 6:33 PM
  
  

  Hello !
  I want to add lib “vue-echarts-v3” to Quasar CLI project.

  What i have done :

  1. Installed “vue-echarts-v3” as “npm install --save echarts vue-echarts-v3”
  2. Edited “quasar.conf.js” as added "build: {
     scopeHoisting: true,
     extendWebpack (cfg) {
     })
     cfg.module.rules.push({
     test: /.js$/,
     loader: ‘babel-loader’,
     include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/vue-echarts-v3/src’)]
     })
     }
     },
     "
  3. In vue module i added :
     “<script>
     import { QCard, QCardSection } from ‘quasar’
     import IEcharts from ‘vue-echarts-v3’
     …”

  "
  <template>
  <q-page class=“flex flex-center”>
  <img alt=“Quasar logo” src="~assets/quasar-logo-full.svg">
  <div name=“divchart” class=“echarts”>
  <i-echarts
  :option=“bar”
  :loading=“loading”
  @ready=“onReady”
  @click=“onClick”
  />
  …
  "

  When load the app in browser i look in Console and there have message
  "
  vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <i-echarts> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

  found in

  —> <PageIndex> at src/pages/Index.vue
  <QPageContainer>
  <QLayout>
  <MyLayout> at src/layouts/MyLayout.vue
  <App> at src/App.vue
  <Root>
  "

  I’m new in Vue, and i cant understood why IECharts are not visible/reachable.

  Can somebody help me, please !

   1  G 1 Reply Last reply Mar 8, 2020, 7:33 PM 

  ---

   

   

  4
  POSTS

  351
  VIEWS

  Log in to reply

   

  ---

• M

  minko Feb 19, 2019, 11:52 PM
  
  

  Resolved - а spelling error for “componets” instead of “components”

   1  

  ---

• ABOUT A YEAR LATER

  ---

  G

  gvorster Mar 8, 2020, 7:33 PM  @minko
  
  

  @minko Can you post your quasar.config.js ?

  I am getting error

  ReferenceError: resolve is not defined
  

  After adding

  cfg.module.rules.push({
            test: /\.js$/,
            loader: ‘babel-loader‘,
           include: [resolve(‘src‘), resolve(‘test‘), resolve(‘node_modules/vue-echarts-v3/src‘)]
          })
  

   1  

  ---

• G

  gvorster Mar 8, 2020, 7:46 PM
  
  

  Ok, I looked at https://github.com/pratik227/echarts-quasar and didn’t have to add anything in quasar.conf.js
  It just works.

How to add "vue-echarts-v3" in Quasar CLI

原文：https://www.cnblogs.com/mouseleo/p/12990728.html