方法

vue-cli のおかげで .vue をいきなり実行できるようになりました。ありがてぇ。

とはいえ @vue/cli を入れた程度では pug も sass も使えません。関連するライブラリも事前にインストールしておく必要があります。

というわけで次の一連のコマンドを実行すればOKです。コピペで流せば一発でブラウザが開いて動作確認できます。

yarn global add @vue/cli-service-global
yarn global add @vue/cli

yarn global add vue-cli-plugin-pug

yarn global add sass-loader
yarn global add node-sass

cat << 'EOS' > Hello.vue
<template lang="pug">
  h1
    | {{message}}
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello',
    }
  },
}
</script>

<style lang="sass">
  h1
    color: blue
</style>
EOS

vue serve Hello.vue -o

全部グローバルに入れておくことはできない？？？

ところが、追加で lodash を使いたくて yarn global add lodash としても、なぜかimport _ from 'lodash' がエラーになります。

To install it, you can run: npm install --save lodash

とか表示されてんです。なんで pug とかグローバルに入って lodash は入らないのかは謎です。

とりあえず yarn add lodash としたら動きましたがしっくりきません。