vue3+ts+vite2项目实战踩坑记录

npm init @vitejs/app

yarn create @vitejs/app

npm init @vitejs/app vite-app --template vue-ts

npm i vue-router@next vuex@next -S

npm i element-plus -S

/*
 * @Author: 飞鱼日记
 * @Date: 2021-04-18 16:12:26
 * @LastEditors: 飞鱼日记
 * @LastEditTime: 2021-04-27 10:47:07
 * @Description: element-plus 组件全局按需加载文件
 */
// 官方网站：https://element-plus.gitee.io/#/zh-CN/component/installation
import {
  ElButton,
  ElLoading,
} from 'element-plus'

// 组件写在components中
export const components: any[] = [
  ElButton,
]
// 插件写在plugins中
export const plugins: any[] = [ElLoading]

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { components, plugins } from './plugins/elementplus'
const app = createApp(App);

// 按需注册elementplus的组插件
components.forEach(component => {
  app.component(component.name, component)
})
plugins.forEach(plugin => {
  app.use(plugin)
});

app.use(router).use(store).mount('#app');

/*****匹配根目录文件将通过globEager动态全局导入注册组件--Start*****/
const modules = import.meta.globEager('./components/*/*.vue')
for (const path in modules) {
  app.component(modules[path].default.name,modules[path].default)
}

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl