日常工作都是使用 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 class='demo-components'>
- <h2 > 测试标题 </h2>
- <p>
- <span class='text'> 这是一条测试的 demo 文本 </span>
- <i class='icon'></i>
- </p>
- <input v-model='value1' @keydown.enter='loginIn'>
- <p>{{ oneText + "-" + "twoText" }}</p>
- </div>
- </template>
- // jade 模板
- <template lang='jade'>
- div.demo-components
h2 测试标题
p
span.text 这是一条测试的 demo 文本
- i.icon
- input(v-model='value1',@keydown.enter='loginIn')
- p {{ oneText + "-" + twoText }}
- </template>
使用 Jade 注意事项
- lang='jade'
- <template lang='jade'>
- div
p 我是测试文本哇, 可是文本太长需要换行啊, 我恰巧回车试一
下啊, 啊呀, 报错啦!!
- </template>
- // 可以写进一个变量里, 或方法中返回数据, 或保持一行不换行
stylus 前后对比:
- <style lang='CSS'> // CSS Less Sass SCSS 样式 demo 此处省略
- // stylus demo
- <style lang='stylus'>
- .main-body
- width 300px
- heihgt 200px
- background-color rgba(0,0,0,1)
- .main-model
- width 50px
- height 50px
- margin 20px auto
- </style>
•stylus 可以使用极简的方式写 CSS, 也可以格式混合 (为了保持格式统一, 不建议), 将解析的任务交给 webpack 去做, 我们只需要书写简单易读的代码即可. 这是我喜欢的风格和方式, Sass 当然也可以做到, 只是个人的机缘巧合现在使用了 stylus.
如果你觉得不错, 或者发现文章中的错误, 或者有更好的建议, 欢迎评论或进前端全栈群: 866109386, 来交流讨论吹水.
来源: http://www.qdfuns.com/article/51070/912f1fc6fc83438225c168832fbff347.html