vue3中一些组件的使用方法

vue3一些组件的使用方法

//引入vue3videoPlay
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css'
//use(vue3videoPlay)

//引入Vant
import Vant from 'vant';
import 'vant/lib/index.css';
//use(Vant)

//引入Naive UI
import naive from 'naive-ui'
//use(naive)

//引入echarts
import * as echarts from 'echarts';
app.config.globalProperties.$echarts = echarts//在挂载之前修改globalProperties才有效
//使用：this.$echarts

import axios from 'axios'
import vueAxios from 'vue-axios'
import store from './store'
import router from './router'
use(vueAxios,axios).use(router).use(store)

//router文件夹下的index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/LoginView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router



//store文件夹下的index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

配置转发

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8081,
    host: '127.0.0.1',
    proxy: {//再配置一个代理程序:
      '/api': {
        target: `http://127.0.0.1:8080`,//后端接口地址
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})