在vue项目中使用 ts pug语法

最新推荐文章于 2024-05-14 04:32:07 发布
最新推荐文章于 2024-05-14 04:32:07 发布
阅读量767 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuj1935/article/details/108706527
版权

在vue项目中使用 ts pug语法
创建vue-cli3.0的时候选择 typeScript
在这里插入图片描述

在 template 里面使用
在这里插入图片描述
这个时候会报错
在这里插入图片描述

然后在下载 ：npm install -D pug-plain-loader pug 就可以正常使用了。

在这里插入图片描述

在这里插入图片描述

前端酱紫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
express ts pug mysql pm2 nodejs 后端快速开发并部署
CSDN_SB_的博客
08-25 548
express-ts 这个是一个后端模板 可以快速简单搭建自己的项目并且部署到服务器 访问旁边Git地址以查看最新文档express-ts express ts mysql pug pm2 这边只做了最基础的一些设置和初始化. 机器说明 本机 本机代表着我们平常开发使用的电脑 服务器 服务器代表线上运行的电脑我这边默认是centos7 use # 复制代码到本机(Windows 用Git Bash/Mac 用自带的终端) git clone git@github.com:xiwang007
在导入.vue文件的时候，ts报错提示：找不到模块“@/Layout/index.vue”或其相应的类型声明
Frank_colo的博客
06-21 2962
会报错的原因是，ts.config.json配置文件里的include字段里的后缀文件，ts在找它的时候，路径有问题，没找到。配置baseurl字段 明确指定根目录是ts.config.json文件所在的当前文件夹。配置了这两个字段，在文件里导入.vue文件的时候，如果用了@/开头，就能顺利找到文件了。找不到模块“@/Layout/index.vue”或其相应的类型声明。配置paths字段 用@/* 代替src/*配置好后，就成功了，ts没有报错了。导入的时候，提示下面这句。
Vue3+TS 项目规范及使用规范（个人见解）
weixin_44832362的博客
02-05 6572
vue 项目开发规范学习总结
2024年在vue项目中使用 ts pug语法(4)，2024年最新音视频开发面试
最新发布
2401_84435192的博客
05-14 288
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react和Vue的原理，区别，亮点，作用。
Angular4 中使用Pug/Jade
会开花的树
07-02 1380
1、安装相应loader : pug-html-loader和`pug’。2、修改 node_modules\@angular\cli\models\webpack-configs\common.js文件，在loader中添加： { test: /\.pug$/, loaders: [ 'html-loader', { l
在Angular-cli中使用Pug(Jade)模板
justforuse的博客
12-20 1571
之前介绍过如何在Angular项目中使用Pug模板，但是方法不是很“优雅”，暴露了不必要的loader模块，且Pug模板编写方法与HTML不尽相同，部分属性需要引号包起来。Angular实际是使用webpack进行打包的，那就可以直接修改webpack.config.js文件，添加pug文件的loader。直接写步骤吧。1 npm install pug-ng-html-loader --save-
WebStorm添加jade(pug) watcher
stSahana的博客
08-12 5564
WebStorm添加jade(pug) watcher jade由于版权问题改名为了pug，但是基本内容没有改变。 pug主要用在Node中，但并不妨碍我们在其他场合使用它。自从接触pug以来，我就很少用原生html语言来编辑网页了，并不是说HTML不好而是jade以缩进来表示HTML中的嵌套关系，结构层次远比HTML要清晰，而且方便学习，使用简单。我在非Node项目中使用pug主要
在vue项目中使用sass语法问题
10-16
sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。这篇文章主要介绍了在vue项目中使用sass语法,需要的朋友可以参考下
在Vue项目中使用Typescript的实现
10-15
在实际操作中，由于Vue 3.0正式版的推迟发布，开发者在Vue 2.x项目中使用Typescript时，需要手动配置Webpack来处理TS和TSX文件。首先，我们需要在`webpack.config.js`中进行如下配置： 1. 设置入口文件（entry）和...
如何在vue中使用ts的示例代码
08-27
在 Vue 中使用 TypeScript 可以为开发者提供更多的编码优势，例如类型检查、直接编译到原生 JS、引入新的语法糖等。本文将为大家介绍如何在 Vue 中使用 TypeScript 的示例代码。 TypeScript 的设计目的主要是解决 ...
详解如何使用webpack在vue项目中写jsx语法
10-19
在Vue项目中使用jsx语法，可以为开发带来更大的灵活性，特别是在需要进行复杂组件构建或希望代码更加简洁的情况下。jsx是一种JavaScript的语法扩展，允许开发者在JS中书写类似于XML的结构，便于描述组件结构。虽然...
vue项目引入ts步骤(小结)
10-16
主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3.0 + ts 引入详细步骤及语法校验报错解决办法
wanglun_的博客
04-18 1万+
前端时间学习了ts，于是用脚手架搭了个vue3.0+ts+tsx的项目，各种语法校验问题，整理下遇到的问题以及解决办法，分享给大家。共勉！！！
二、vue3+ts项目框架搭建——必备工具
xiaoququ的博客
02-18 1189
在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！})在mian.js配置。
笔记：Vue 使用pug + ts
weixin_33785972的博客
03-06 931
Vue大操练 技术栈：pug + typescript 项目前景：在前几天看到别人家的项目使用了pug + ts，总共代码行数加起来简直少的可怜，心痒痒便自己动手试了一试 解决的问题：视图层的文本信息完全和页面解耦，不用担心找一个字段/莫名其妙标点的文本错误啦，加上ts以后报错信息也更多了呢（编译不通过你丫咋运行！） 语法介绍 pug 使用缩进进行分组，无标签化 .p(v...
pug如何加入畅言评论功能
typeof_yaco的博客
04-09 770
## 前言小菜鸡前段时间尝试着用 Hexo 建一个个人博客。 安装hexo过程很顺畅，没有遇到什么问题，但是如果你有hexo安装的其他问题可以去看这位 小仙女 写的很详细的教程。 相比之下我的教程内容不是很精细，但是如果你想少走弯路可以来瞅瞅。## 问题我用的是畅言来当评论后台，但是我在添加评论模块的时候遇到了棘手的问题 -- > 这个主题的语言 > Pug 我不会，哈哈。其实就是把畅...
vue项目中使用ts入门
热门推荐
greed
11-07 2万+
最近项目需要将原vue项目结合ts的使用进行改造，这个后面应该是中大型项目的发展趋势，看到一篇不错的入门教程，结合它并进行了一点拓展记录之。本文从安装到vue组件编写进行了说明，适合入门。 1、引入Typescript npm install vue-class-component vue-property-decorator --save npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-
vue3+ts的基础使用
weixin_46724655的博客
05-26 6334
vue3+ts的基础使用 ref 属性类型确定时有以下四种方式限制类型： <script lang="ts" setup> import { ref, Ref } from 'vue' // 属性接口 interface book { name: string price: number } const name: Ref<string> = ref('张三'); const age = ref<number>(20); const sex = ref('
【TS】在vue中引入第三方文件报错
qq_46333384的博客
03-11 2396
简单解决vue中没有找到某文件的声明文件的问题
在vue项目中使用?.语法报错
05-31
如果你想在 Vue 2.x 项目中使用 ?. 语法，可以使用 Babel 转译器将它转译成 ES6 代码。你可以在 `.babelrc` 文件中添加如下配置： ``` { "plugins": [ ["@babel/plugin-proposal-optional-chaining", { "loose": ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端酱紫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值