ディレクトリ構成をあらかた決めたのでメモ。

vue createのオプションはCSSプリプロセッサとPWAのサポートとBABELのサポートを選択したはず。
ちなみにVue2です。

mai 
 -node_modules
  | なんかいっぱいある
 -public
  | img(faviconとか自動生成されたやつ)
  | index.html(fontawesomeを読み込んでる(←cssからでもimportできる))
 -src
  | assets
    - img(jpegとpng)
    - svg(icon用のsvg)
    - scss(cssの共通関数とか)
  | components(後述)
  | css(reset.css)
  | router
  | store
  | views(後述)
 package.json
 vue.config.js

vueでscssの共通関数を使いたい

vue createのときにcssプリプロセッサを使うよって指定すると「sass-loader」が自動でインストールされる(忘れてもあとから手動でインストールできる)。

ただそれだけだと使えないぽくて、そのためにわざわざ「vue.config.js」をつくった。

↓中身

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/assets/scss/style.scss";'
      }
    }
  }
};

参考にしたサイト
https://online-study.jp/5821/

prependDataって書いてあるけどエラーコードにadditionalData使えって書いてあったから変えちゃった。
なんか6回くらい同じコード読み込まれたけど現状は動いているのでよし(よくない)。
sass-loaderの公式サイトもあるからそこ見ればなんかわかるかもしれない。

余談：
vue createでTypeScript使う設定にするとやたらエラーが出て色んなとこ書き換えなきゃいけなかったからやめた。

viewsとcomponentsの中身

viewsにはもともと「Home.vue」「About.vue」が入ってたから「URLとかページ名変えたいやつ入れとけばいいかな？」って感じでリンク要素から飛ぶページのファイルを入れた。
似たような構成のページもあるのでその分はvue routerのみ分岐。

componentsの中身はAtomicDesign風にmodulesとpartsフォルダに分けた。
modulesは「Header.vue」とか「ChallengeList.vue」とかセクションごとに分けられそうなパーツ。
partsはリストの繰り返し要素とか汎用的なボタンとか表示非表示を切り替えたい(popupとか)要素が入っている。

Vue.js ディレクトリ構成 色々試してみた
https://qiita.com/tockn/items/2ce68b99e0839df52200 – Qiita
いろいろ見たけど一番参考になったかもしれない

次は仮データの読み込みとボタン要素の動作確認。