vue+vite+ts项目按需要引入vant或elementPlus等ui插件时,抽离成单独的 js 文件

雨顺518

于 2022-04-15 19:58:52 发布

阅读量873

点赞数

分类专栏： vite vue3 ts 文章标签： vue

本文链接：https://blog.csdn.net/qq_21115567/article/details/124202629

版权

vite 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

本文介绍了作者对于代码整洁的追求，通过将 vant 和 element 的引入从 main.ts 文件中分离出来，创建了单独的 vant 文件夹及 index.ts 文件，以此提升代码的可读性和维护性。这一做法有助于保持项目的模块化，使得前端项目结构更加清晰。

摘要由CSDN通过智能技术生成

感觉本人写代码有强迫症,每当看到一个文件乱糟糟的就不舒服,为了文件代码美观所以将main.ts中有关引入vant的代码分离出来:
main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vant from './vant'
export const app = createApp(App)

app.use(router)
app.use(vant)

app.mount('#app')

src目录下新建vant文件夹,然后下面新建index.ts,内容如下:

import { Form, Field, CellGroup, Button } from 'vant'

export default {
  install: function (Vue: any) {
    Vue.use(Form)
    Vue.use(Field)
    Vue.use(CellGroup)
    Vue.use(Button)
  },
}