vue 使用Jade模板写html,stylus写css
vue 使用Jade模板写html,stylus写css
日常工作都是使用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 模板
测试标题
这是一条测试的demo文本
{{ oneText + "-" + "twoText" }}