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

目录
  • 1.Vite创建vue3项目
  • 2.配置别名alias
  • 3.引入element-plus
  • 4.glob全局导入
  • 5.静态资源导入
  • 总结：

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项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一步步带你用vite简单搭建ts+vue3全家桶

    一步步带你用vite简单搭建ts+vue3全家桶

    目录 一.vite环境搭建,构建vite-vue-ts项目 1.安装vite环境 2.使用vite初始化vite+vue+ts的项目 3.选择项目类型为vue+ts 二.项目配置 1.vue-router 配置 2.vuex 配置 3.vite.config.ts 配置 总结 一.vite环境搭建,构建vite-vue-ts项目 1.安装vite环境 npm init @vitejs/app 或者 yarn create @vitejs/app 2.使用vite初始化vite+vue+ts的项目

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • vue3+vite使用jsx和tsx详情

    目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • Vue3+Vite+TS实现二次封装element-plus业务组件sfasga

    目录 1.结构字符串 2.返回tuple元组 3.访问Dict字典 4.运用库 5.在列表中切片/步进 6.用 ranges 1.结构字符串 你会经常需求打印字符串.要是有很多变量,防止下面这样: name = "Raymond" age = 22 born_in = "Oakland, CA" string = "Hello my name is " + name + "and I'm " + str(age) + &quo

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    目录 写在前面 创建Vue3项目 开发规范 Vite配置 别名配置 环境变量 .env文件 定义环境变量 在vite.config.ts中获取环境变量 自动导入 NaiveUI的安装 写在最后 写在前面 现在已经有很多项目团队使用Vue3+TS进行开发,同时也就意味着Vue3的生态越来越完善,如果还是停留在Vue2的阶段已经out了,这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架. 创建Vue3项目 首先我们通过Vite来创建一个Vue3+TS的一个项目,打开终端,找到我们

  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

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

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

    目录 1.Vite创建vue3项目 2.配置别名alias 3.引入element-plus 4.glob全局导入 5.静态资源导入 总结: 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的需要手动

  • Mybatis plus多租户方案的实战踩坑记录

    Mybatis plus多租户方案的实战踩坑记录

    目录 (一).方案 (二).官方多租户的方案的优化和坑 1.分析哪些需要加多租户,哪些不需要加 2.jsqlparser 这个包与pagehelper 版本不对 3.sql解析失败 4.忽略多租户不生效 总结 公司的老项目要改造多租户,于是进入了大坑,本文写点遇到的坑以及解决方案,每次遇到问题在网上搜了好久,记录下来,防止以后忘掉. (一).方案 网上有很多方案,本文只写最后一种,即:表增加租户id,实现数据隔离 方案一:增加租户id,在每一个mapper调用的地方,都手工加上租户id 例如:

  • 分布式爬虫scrapy-redis的实战踩坑记录

    分布式爬虫scrapy-redis的实战踩坑记录

    目录 一.安装redis 1.首先要下载相关依赖 2.然后编译redis 二.scrapy框架出现的问题 1.AttributeError: TaocheSpider object has no attribute make_requests_from_url 原因: 2.ValueError: unsupported format character : (0x3a) at index 9 问题: 三.scrapy正确的源代码 1.items.py文件 2.settings.py文件 3.ta

  • Next.js项目实战踩坑指南(笔记)

    Next.js项目实战踩坑指南(笔记)

    前言 github: https://github.com/code-coder/next-mobile-complete-app 已经用Next.js快两个月了,项目已经提测了,这里总结一下开发过程中,以及在部署的时候遇到一些棘手的问题. 疑难杂症 1. 移动端overflow:auto,ios滚动卡顿 解决方案: 主容器增加样式-webkit-overflow-scrolling: touch; 2. dev mode路由跳转后样式丢失 原因:dev下样式根据页面动态加载,浏览器缓存文件st

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    目录 背景 问题定位 进一步分析 总结 背景 在我的 <Vue 3 开发企业级音乐 App>课程问答区,有个同学提了个问题,在歌手列表到歌手详情页面到转场动画中,只有进入动画,却没有离场动画: 该学生确实在这个问题上研究了有一段时间,而且从他的描述,我一时半会儿也想不出哪有问题,于是让他把代码传到 GitHub 上,毕竟直接从代码层面定位问题是最靠谱的. 问题定位 一般遇到此类问题的时候,我的第一反应是他用的 Vue 3 版本可能有问题,毕竟 Vue 3 还在不断迭代过程,某个版本有一些小 b

  • JavaWeb踩坑记录之项目访问不到html文件

    JavaWeb踩坑记录之项目访问不到html文件

    踩坑问题和原因 踩坑问题 由于博主的JavaWeb是速成所以对一些知识点掌握的不是很熟,所以也就出现了今天这个问题——Tomcat访问不到html文件. 在运行是总是会出现404.每次出现这个就很烦,让人摸不着头脑.虽然这个问题其实对一些项目没有很大的影响,但是他会让我的项目目录会很杂乱.总的来说该问题就是不解决它,就会出现一堆静态资源都在一个文件夹.这可能会导致后期找一些项目的文件就得找半天. 踩坑原因 由于粗心的我把一些html文件都放在WEB-INF下面.因为WEB-INF下的资源不能直接

  • 详解vue-class迁移vite的一次踩坑记录

    目录 what happen 探究 解决 总结 what happen 最进项目从 vue-cli 迁移到了 vite,因为是 vue2 的项目,使用了 vue-class-component类组件做 ts 支持.当然迁移过程并没有那么一帆风顺,浏览器控制台报了一堆错,大致意思是某某方法为 undefined,无法调用.打印了下当前 this,为 undefined 的方法都来自于 vuex-class 装饰器下的方法.这就是一件很神奇的事,为什么只有 vuex-class 装饰器下的方法才会为

  • Linux/Docker 中使用 System.Drawing.Common 踩坑记录分享

    前言 在项目迁移到 .net core 上面后,我们可以使用 System.Drawing.Common 组件来操作 Image,Bitmap 类型,实现生成验证码.二维码,图片操作等功能.System.Drawing.Common 组件它是依赖于 GDI+ 的,然后在 Linux 上并没有 GDI+,面向谷歌编程之后发现,Mono 团队使用 C语言 实现了GDI+ 接口,提供对非Windows系统的 GDI+ 接口访问能力,这个应该就是libgdiplus.所以想让代码在 linux 上稳定运

  • Java踩坑记录之BigDecimal类

    前言 在java.math包中提供了对大数字的操作类,用于进行高精确计算,如BigInteger,BigDecimal类.而平常我们开发中使用最多的float和double只能适用于一般的科学和工程计算,如果要在比较精确的计算方面如货币,那么使用float和double会相应的丢失精度,因此用于精密计算大数字的类BigDecimal就必不可少了.所以BigDecimal适合商业计算场景,用来对超过16位有效位的数进行精确的运算.但是BigDecimal的使用并不像float和double那样,使

随机推荐