何度も開始時につまづくので、メモ
1.Node.js をインストール
これは検索すればわかるので割愛。
2.yarn をインストール
これも検索すればわかるけど、適当に以下。
$ npm i -g yarn
3.vue-cli をインストール
$ yarn add global vue-cli
インストール後、version を確認したい場合
$ vue -V
4.プロジェクトを作成する
任意のフォルダに移動して以下のコマンドを実行。
$ vue create hogehoge
Vue 3系も出てきたので最初に色々選べる。
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
Sass、Scss、Stylus を利用する場合は、Manually select features を選んで次の項目で、
CSS Pre-processors でカーソルをあわせて、Space を押そう。
あとの項目は好きなように。
VScodeのターミナル(Ctrl+@)でyarn serveで起動。
localhost:8080 で確認可能。
5.pug (jade) を導入
煩わしい<>タグ打ち、終わりのタグを打つのが面倒なので、pug をインストール。
$ yarn add -D pug pug-loader pug-plain-loader
pug-plain-loader をインストールしている記述をしているサイトはほぼ皆無だが、
自分の環境では必ずないと怒られるので、忘れずにインストール。
これ以降新規の.vue ファイルは
hogehoge.vue
<template lang="pug">
で使用可能になる。
Stylus を利用する場合は、
hogehoge.vue
<style lang="stylus">
で利用可能になる。