Vue3中常用模块的引入

Echarts的引入

1. 首先安装Echarts模块

   npm install echarts --save

2. 之后在main.js中进行引入，部分代码如下

   import {createApp} from 'vue'
   import App from './App.vue'
   import * as echarts from 'echarts'
   
   const app = createApp(App)
   
   app.config.globalProperties.$echarts = echarts
   
   app.mount('#app')

3. 然后进行使用即可。在使用的过程中，可以利用this.$echarts来获取echarts对象，如下面的例子所示，使用一个官方提供的柱状图代码，函数可以在mounted中挂载，也可以在method中指定，将echarts和dom元素进行绑定

   <template>
     <div>
       <div id="myChart" style="height: 600px;position: center"></div>
     </div>
   </template>
   
   <script>
   export default {
     name: "TestChart",
     mounted() {
       var chartDom = document.getElementById('myChart');
       var myChart = this.$echarts.init(chartDom);
       var option;
   
       option = {
         xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
             data: [120, 200, 150, 80, 70, 110, 130],
             type: 'bar'
           }
         ]
       };
   
       option && myChart.setOption(option);
     }
   }
   </script>
   
   <style scoped>
   
   </style>

   这里需要注意的是，绑定的dom元素必须设置高度height

Element UI的引入

1. 首先安装Element UI模块，需要注意这里安装的是element-plus

   npm install element-plus --save

2. 然后在main.js中引入，部分代码如下

   // main.ts
   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import App from './App.vue'
   
   const app = createApp(App)
   
   app.use(ElementPlus)
   app.mount('#app')

3. 最后就可以按照官方文档中使用方法进行使用

axios的引入

1. 首先安装axios模块

   npm install axios --save

2. 之后在需要用到的组件中按需引入即可

   import axios from "axios";

vue-router的引入

1. 首先安装vue-router模块

   npm install vue-router --save

2. 之后在src下新建route文件夹，router文件夹内新建index.js，写入如下的代码。（注意名称）具体配置可以参考官方文档

   Home | Vue Router (vuejs.org)

   import {createRouter, createWebHistory} from 'vue-router'
   
   const routes = [
       {path: '/', component: () => import('../components/TestChart')},
   ]
   
   const router = createRouter({
       history: createWebHistory(),
       routes
   })
   
   export default router;

3. 之后在main.js中进行引入，部分代码如下

   import {createApp} from 'vue'
   import App from './App.vue'
   import router from './route'
   
   const app = createApp(App)
   
   app.use(router)
   app.mount('#app')

code-mirror的引入

CodeMirror是一个前端常用的编辑器组件，我们可以在Vue中很方便的引入它。首先需要安装该模块：

npm install vue-codemirror --save

之后需要在组件中按需引入，如下所示

<codemirror style="text-align: left"
          v-model="code"
          placeholder="Code goes here..."
          :style="{ height: '400px' }"
          :autofocus="true"
          :indent-with-tab="true"
          :tab-size="2"
          :extensions="extensions"/>

在script标签中则进行如下代码添加，这里编辑器中的内容就与code进行了绑定，而在extensions中可以设置黑暗模式，语言模式等。

<script>
import {Codemirror} from 'vue-codemirror'
import {python} from "@codemirror/lang-python"
import {oneDark} from "@codemirror/theme-one-dark"

export default {
  data() {
    return {
      code: "import times",
      extensions
    }
  }
}
</script>

如果需要切换正常和语言模式，则需要动态切换extensions属性。

我们也可以按照官方案例进行组件添加，不过需要注意的是这里所有额外的东西例如ondark模式，特定的language，都需要额外进行安装。

参考文章

1. 前端插件库之vue3使用vue-codemirror插件-CSDN博客
2. surmon-china/vue-codemirror: @codemirror code editor component for @vuejs (github.com)