全国咨询热线:18720358503

做好小程序流程制做_vue 使用Jade模板写html,stylu

类别:行业新闻 发布时间:2021-01-08 浏览人次:

vue 使用Jade模板写html,stylus写css的方法       这篇文章主要介绍了vue 使用Jade模板写html,stylus写css的方法,文中还给大家提到了使用jade注意事项,需要的朋友可以参考下

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

安装包

// 安装jade包
npm install jade jade-loader --save-dev
// 如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装
npm install stylus stylus-loader --save-dev

配置文件

// webpack.base.conf.js 配置
// jade
 test : /\.jade$/,
 loader : 'jade-loader',
// stylus 如果使用vue-cli构建,无需配置此项
 test : /\.styl$/,
 loader : 'stylus-loader',
}

jade使用前后对比

// html 模板
 template 
 div 
 h2 测试标题 /h2 
 span 这是一条测试的demo文本 /span 
 i /i 
 input v-model='value1' @keydown.enter='loginIn' 
 p {{ oneText + "-" + "twoText" }} /p 
 /div 
 /template 
// jade 模板
 template lang='jade' 
 ponents
 h2 测试标题
 span.text 这是一条测试的demo文本
 i.icon
 input(v-model='value1',@keydown.enter='loginIn')
 p {{ oneText + "-" + twoText }}
 /template 

使用Jade注意事项

需要简单了解jade基本使用语法(10分钟简单了解即可)
template 需要加上 lang='jade' 属性
标签内文本换行会解析错误,需要使用其他技巧性方法解决。例:

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

总结

以上所述是小编给大家介绍的vue 使用Jade模板写html,stylus写css的方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


下一篇:没有了

推荐阅读

做好小程序流程制做_vue 使用Jade模板写html,stylu

vue 应用Jade模版写html,stylus写css的方式 本文关键详细介绍了vue 应用Jade模版写html,stylus写css的方式,原文中归还大伙儿提及了应用jade留意事宜,必须的朋友能够参照下日常事务全是...

2021-01-08
h5网页-香港企业网站建设

中国香港企业网站建设企业,潜心网站程序制作设计方案产品研发客户遍布在全国性400好几个大城市,她们都会应用EUCMS企业网站建设智能化管理方法系统软件!前台接待演试后台管理...

2021-01-08
SEM推广效果不佳该从哪些方面分析?

伴随着互连网技术性的发展趋势日渐完善,网上个类互联网营销推广刚开始朝气蓬勃发展趋势。现阶段,奏效快、范畴广、无尽制的互联网营销推广当属SEM竟价营销推广,对公司来讲,...

2021-01-08
搜索引擎优化优化了关于新站的四个关注点,远

SEO提升了新网站的四个重要点,以免减少功能损耗SEO提升了有关新网站杜绝输出功率减少的四点关心SEO提升技术性天津市一年前()185°C 我一直想让网站赢利,可是当我们们每日都尝试...

2021-01-08
小程序码生成器_React为 Vue 引入容器组件和展示组

React为 Vue 引进器皿部件和展现部件的实例教程详细说明 本文关键详细介绍了React为 Vue 引进器皿部件和展现部件的实例教程详细说明,原文中很详尽的给大伙儿详细介绍了应用器皿...

2021-01-08
微信小程序样板_微信小程序canvas完成刮刮乐效果

手机微信微信小程序canvas完成刮刮乐实际效果 本文关键为大伙儿详尽详细介绍了手机微信微信小程序canvas完成刮刮乐实际效果,具备一定的参照使用价值,很感兴趣的小伙子伴们...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信