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

更新时间：2022年09月03日 12:02:57 作者：飞鱼日记

最近尝试上手Vue3+TS+Vite,对比起Vue2有些不适应,但还是真香,下面这篇文章主要给大家介绍了关于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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3自定义指令语法图文详解
这篇文章主要给大家介绍了Vue3自定义指令的相关资料,自定义指令是一种在Vue应用程序中扩展HTML标签的能力,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-09-09
VueQuillEditor富文本上传图片(非base64)
这篇文章主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vuex的actions属性的具体使用
这篇文章主要介绍了Vuex的actions属性的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
简单聊一聊vue中data的代理和监听
这篇文章主要给大家介绍了关于vue中data的代理和监听的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2022-09-09
关于vue-router的那些事儿
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-05-05
Vue3中Element Plus Table(表格)点击获取对应id方式
这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
npm ERR! code E404在vscode安装插件时报错的两种解决方案
这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下
2023-04-04
详解Vue3 中的计算属性及侦听器
这篇文章主要介绍了详解Vue3 中的计算属性及侦听器，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的朋友可以看下一下
2022-08-08
vue基础之事件v-onclick="函数"用法示例
这篇文章主要介绍了vue基础之事件v-onclick="函数"用法,结合实例形式分析了vue.js事件v-on:click="函数"的data数据添加、点击响应、以及留言本功能相关操作技巧,需要的朋友可以参考下
2019-03-03
vue如何实现接口统一管理
这篇文章主要介绍了vue如何实现接口统一管理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09