资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue 使用Jade模板写html，stylus写css

vue 使用Jade模板写html，stylus写css

scwang90 / 1887人阅读

摘要：使用模板写，写日常工作都是使用开发页面和写的多了就想偷懒简化各种书写方式，所以使用了写，写，省了很多的步骤和提高了效率。这是我喜欢的风格和方式，当然也可以做到，只是个人的机缘巧合现在使用了。写下本文做个人记录，也给其他人做个参考。

vue 使用Jade模板写html，stylus写css

日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。

安装包
</>复制代码 
  1. // 安装jade包
  2. npm install jade jade-loader --save-dev
  3. // 如果使用vue-cli构建项目，则不需要安装stylus相关的包，vue-cli默认已安装
  4. npm install stylus stylus-loader --save-dev
配置文件
</>复制代码 
  1. // webpack.base.conf.js 配置
  2. // jade
  3. {
  4.     test : /.jade$/,
  5.     loader : "jade-loader",
  6. }
  7. // stylus 如果使用vue-cli构建，无需配置此项
  8. {
  9.     test : /.styl$/,
  10.     loader : "stylus-loader",
  11. }
jade使用前后对比
</>复制代码 
  1. // html 模板
</>复制代码 
  1. // jade 模板
使用Jade注意事项

需要简单了解jade基本使用语法（10分钟简单了解即可）

template 需要加上lang="jade"属性

标签内文本换行会解析错误，需要使用其他技巧性方法解决。例：

</>复制代码 
  2. // 可以写进一个变量里、或方法中返回数据、或保持一行不换行
stylus 前后对比
</>复制代码

stylus 可以使用极简的方式写css，也可以格式混合(为了保持格式统一，不建议)，将解析的任务交给webpack去做，我们只需要书写简单易读的代码即可。这是我喜欢的风格和方式，sass当然也可以做到，只是个人的机缘巧合现在使用了stylus。

</>复制代码 
  1. 写下本文做个人记录，也给其他人做个参考。
GPU云服务器 云服务器 html写css vue里写原生js 如何写css css样式怎么写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115670.html

相关文章

  • vue 使用Jade模板写html，stylus写css

    摘要：使用模板写，写日常工作都是使用开发页面和写的多了就想偷懒简化各种书写方式，所以使用了写，写，省了很多的步骤和提高了效率。这是我喜欢的风格和方式，当然也可以做到，只是个人的机缘巧合现在使用了。写下本文做个人记录，也给其他人做个参考。 vue 使用Jade模板写html，stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade...

    Carl 评论0 收藏0

  • vue 使用Jade模板写html，stylus写css

    摘要：使用模板写，写日常工作都是使用开发页面和写的多了就想偷懒简化各种书写方式，所以使用了写，写，省了很多的步骤和提高了效率。这是我喜欢的风格和方式，当然也可以做到，只是个人的机缘巧合现在使用了。写下本文做个人记录，也给其他人做个参考。 vue 使用Jade模板写html，stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade...

    Anshiii 评论0 收藏0

  • 太急了点吧？贴吧PWA20天就出炉了

    摘要：老司机开车从不需要理由喜欢我就来点我吧易杭贴吧新鲜出炉的中文社区前述最近一直在写一个发贴子的应用，前不久才刚刚完工其实还有很多需要改进的地方。 老司机开车 从不需要理由 喜欢我 就来点我吧 易杭贴吧--新鲜出炉的中文社区 http://tieba.freeedit.cn showImg(https://segmentfault.com/img/remote/146000000982...

    王伟廷 评论0 收藏0

  • 太急了点吧？贴吧PWA20天就出炉了

    摘要：老司机开车从不需要理由喜欢我就来点我吧易杭贴吧新鲜出炉的中文社区前述最近一直在写一个发贴子的应用，前不久才刚刚完工其实还有很多需要改进的地方。 老司机开车 从不需要理由 喜欢我 就来点我吧 易杭贴吧--新鲜出炉的中文社区 http://tieba.freeedit.cn showImg(https://segmentfault.com/img/remote/146000000982...

    seasonley 评论0 收藏0

  • 太急了点吧？贴吧PWA20天就出炉了

    摘要：老司机开车从不需要理由喜欢我就来点我吧易杭贴吧新鲜出炉的中文社区前述最近一直在写一个发贴子的应用，前不久才刚刚完工其实还有很多需要改进的地方。 老司机开车 从不需要理由 喜欢我 就来点我吧 易杭贴吧--新鲜出炉的中文社区 http://tieba.freeedit.cn showImg(https://segmentfault.com/img/remote/146000000982...

    浠ラ箍 评论0 收藏0

发表评论

登陆后可评论

0条评论

scwang90

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<