vueはJadeテンプレートを使って書きます.stylasはcssを書きます.

vueはJadeテンプレートを使って書きます.stylasはcssを書きます.
vueはJadeテンプレートを使って書きます.stylasはcssを書きます.
日常の仕事はvue開発ページとwebAppを使っています.書くことが多いと、いろいろな書き方をなまけたくなります.だから、jadeを使って書きました.stylasは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使用上の注意事項

Jadeの基本的な使い方を簡単に知る必要があります.

templateはlang='jade'属性

を追加する必要があります.

ラベル内のテキストをギルド解析エラーに変換するには、他のテクニックを使って解決する必要があります.

<template lang='jade'>
    div
        p        ,           ，       
            ，  ，   ！！
template>
//          、        、        

スタイルの前後の比較:

<style lang='css'> // css less sass scss   demo     

// stylus demo