vue3+ts+vite2项目实战踩坑记录
1.Vite创建vue3项目
使用 NPM:
npm init @vitejs/app
使用 Yarn:
yarn create @vitejs/app
一个命令快速安装vite+ts+vue3项目：
npm init @vitejs/app vite-app --template vue-ts
默认构建好的目录结构是不包含router和vuex的需要手动安装并创建对应目录,使用命令：
npm i vue-router@next vuex@next -S
注意：vue3.0只支持router和vuex必须是4.0及以上版本
下面是我创建好的实战项目目录，仅供参考：
2.配置别名alias
vite构建的vue默认是没有@别名的，所以需要我们手动配置下，如下图vite2.0配置方法仅供参考：
3.引入element-plus
如果需要使用element ui库需要使用兼容vue3.0的element-plus库才行
安装element-plus:
npm i element-plus -S
是按需引入还是全局全部引入，看个人需求，具体引入方法请移步到element-plus官网里面介绍的很详细，就不再赘述了
如果你是用按需加载可抽离成单独文件，新建elementplus.ts代码如下：
/*
* @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]
在main.ts引入，如下：
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');
4.glob全局导入
想要组件自动注册全局引入需要使用vite官方提供的导入方案，分为glob和globEager异步和同步两种，但是在实践中glob纯在一个神秘的bug，由于它是异步加载组件的，如果一个页面模板引入了很多组件，多次秒刷新时会出现白屏或者有的组件加载了有的组件未加载空白的情况，不知道是因为我刷新太快，组件未来的及加载还是什么，所以最后采用了globEager同步加载组件的方法，这个方法是一刷新所有组件同步加载的，多次秒刷没有发现bug；
在main.ts引入一段代码：
/*****匹配根目录文件将通过globEager动态全局导入注册组件--Start*****/
const modules = import.meta.globEager('./components/*/*.vue')
for (const path in modules) {
app.component(modules[path].default.name,modules[path].default)
}
上面modules所匹配的目录根据你自己的项目目录配置即可，我倾向于匹配components下的所有子目录下所有组件文件，如下图：
注意：每个组件必须是具名组件（即组件name属性必须设置名称页面应用时需使用name名称来调用）比如：
组件button：
页面引入使用button组件里定义的name即可:
至此我们就可以畅快的使用组件了而且页面无需使用import导入，是不是很爽- _ -
5.静态资源导入
vite导入图片方法，如果图片放在assets里面不能使用绝对路径引入比如
这样引入打包时是不能够被vite打包进去的
官方推荐方法：
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
至于css中背景图片的url（）同样导入方法
总结：
暂时写这么多，vite相对于webpack简直质的飞跃，如其名速度超快，但往往新的事物诞生也会伴随着新的坑需要我们去探，加油，奥利给~
到此这篇关于vue3+ts+vite2项目的文章就介绍到这了,更多相关vue3+ts+vite2项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue.js的动态组件模板的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最近在做uni-app的时候需要用到vant组件，在网上看到了很多的使用vant组件的方法，但是讲解的大多繁琐，或者无法使用，现把最新，最实用的vant组件的使用方法分享给大家,需要的朋友可以参考下2023-02-02
防抖就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔,防抖大家都学过,但是如何在 Vue3 里中将防抖做到极致呢,下面小编就来和大家详细讲讲2023-10-10
vue3使用Pinia修改state的三种方法(直接修改，$patch，actions)
Vue3 Pinia是一个状态管理库,专门为Vue3设计优化,它提供了一种简单而强大的方式来管理应用程序的状态,并且与Vue3的响应式系统紧密集成,本文给大家介绍了vue3使用Pinia修改state的三种方法,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Element Breadcrumb 面包屑的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程,下面这篇文章主要给大家介绍了关于Vue简介、引入、命令式与声明式编程的相关资料,需要的朋友可以参考下2022-10-10
Vue axios与Go Frame后端框架的Options请求跨域问题详解
这篇文章主要介绍了Vue axios与Go Frame后端框架的Options请求跨域问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了elementUI下拉框实现隐藏时触发相关事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了在 Vue.js中优雅地使用全局事件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要为大家介绍了为Vue3 组件标注 TS 类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论